/* Hallmark · design-system: design.md · designed-as-app
 * theme: custom · vibe: "Matchday-Plakat, Vereinsgrün, Kreidelinien, Flutlicht"
 * paper: oklch(96.5% 0.012 140) · accent: oklch(72% 0.17 52)
 * display: Big Shoulders Display · body: IBM Plex Sans · axes: light / display-condensed-bold / warm
 * anchor hue 150 = Vereinsgrün aus dem Cup-Logo · accent hue 52 = VIACTIV-Orange aus dem Logo
 */

/* Self-hosted (no Google Fonts request: GDPR, and the CSP stays at 'self').
 * Latin subsets of the variable fonts from fonts.gstatic.com, SIL OFL 1.1.
 * One file per family covers every weight in the range. */
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("/assets/fonts/big-shoulders-display.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-italic.woff2") format("woff2");
}

:root {
  /* Colour */
  --color-paper:        oklch(96.5% 0.012 140);
  --color-paper-2:      oklch(93% 0.02 140);
  --color-logo-bg:      oklch(99.2% 0.003 140);
  --color-rule:         oklch(82% 0.022 145);
  --color-muted:        oklch(44% 0.025 150);
  --color-ink:          oklch(21% 0.03 155);
  --color-brand:        oklch(62% 0.15 145);
  --color-brand-ink:    oklch(45% 0.11 148);
  --color-pitch-deep:   oklch(29.5% 0.066 152);
  --color-pitch-line:   oklch(43% 0.075 150);
  --color-pitch-shade:  oklch(15% 0.03 155);
  --color-grass-light:  oklch(34.5% 0.078 150);
  --color-grass-dark:   oklch(30.5% 0.07 152);
  --color-chalk:        oklch(88% 0.025 150);
  --color-on-pitch:     oklch(96% 0.02 130);
  --color-on-pitch-2:   oklch(84% 0.045 140);
  --color-accent:       oklch(72% 0.17 52);
  --color-accent-ink:   oklch(21% 0.03 155);
  --color-focus:        oklch(58% 0.19 48);

  /* Type */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body:    "IBM Plex Sans", "Helvetica Neue", sans-serif;

  --text-sm:        0.875rem;
  --text-base:      1.0625rem;
  --text-md:        1.25rem;
  --text-lg:        1.5625rem;
  --text-xl:        clamp(1.75rem, 1.2vw + 1.4rem, 2.25rem);
  --text-2xl:       clamp(2.25rem, 3vw + 1.25rem, 3.5rem);
  --text-display-s: clamp(3rem, 6vw + 1.25rem, 6rem);
  --text-display:   clamp(4.5rem, 15vw, 11rem);

  /* Space — 4pt scale */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* Layout */
  --page-max: 84rem;
  --gutter:   clamp(1rem, 4vw, 3rem);
  --banner-h: 2.75rem;
  --bar-h:    4.5rem;

  /* Rules & radius */
  --rule-hair:  1px;
  --rule-thick: 3px;
  --rule-slab:  6px;
  --radius-btn: 2px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 100ms;
  --dur-short: 180ms;
  --dur-long:  380ms;

  /* Z scale */
  --z-base:   1;
  --z-raised: 10;
  --z-sticky: 200;
  --z-toast:  500;
}