/* ==========================================================================
   TRIFECTA — Design-Tokens
   Erzeugt aus brand.json über scripts/build_tokens.py. Nicht von Hand ändern:
   brand.json anpassen und neu generieren, sonst laufen Guideline und Code
   auseinander.

   Dunkel ist der Standardmodus (:root). Hell ist gleichwertig und wird über
   .theme-light oder [data-theme="light"] auf jedem beliebigen Element aktiviert
   — auch abschnittsweise innerhalb einer dunklen Seite.
   ========================================================================== */

:root {
  /* --- Markenfarben, modusunabhängig ------------------------------------ */
  --brand-navy: 215 51% 11%;        /* #0E1A2B */
  --brand-abyss: 216 50% 8%;       /* #0A121E */
  --brand-cyan: 194 100% 50%;        /* #00C2FF */
  --brand-cyan-ink: 197 100% 30%;    /* #00709B */
  --n-paper: 210 22% 96%;           /* #F4F6F8 */
  --n-cloud: 213 24% 93%;           /* #E8ECF1 */
  --n-mist: 212 24% 70%;            /* #9FB0C4 */
  --n-steel: 213 17% 43%;           /* #5A6B80 */
  --n-slate: 212 37% 23%;           /* #24384F */
  --n-abyss: 216 50% 8%;           /* #0A121E */

  /* --- Rollen im Standardmodus (dunkel) --------------------------------- */
  --bg: 216 50% 8%;            /* #0A121E */
  --bg-raised: 215 51% 11%;            /* #0E1A2B */
  --surface: 212 37% 23%;            /* #24384F */
  --fg: 213 24% 93%;            /* #E8ECF1 */
  --fg-strong: 0 0% 100%;            /* #FFFFFF */
  --fg-muted: 212 24% 70%;            /* #9FB0C4 */
  --border: 212 37% 23%;            /* #24384F */
  --accent: 194 100% 50%;            /* #00C2FF */
  --on-accent: 216 50% 8%;            /* #0A121E */
  --swim: 203 33% 46%;             /* #4E7E9B */
  --bike: 35 51% 50%;             /* #C08A3E */
  --run: 130 18% 52%;             /* #6F9A76 */
  --z1: 209 25% 48%;              /* #5C7C99 */
  --z2: 180 44% 43%;              /* #3E9E9E */
  --z3: 46 68% 47%;              /* #C9A227 */
  --z4: 27 72% 52%;              /* #DC7A2B */
  --z5: 4 61% 48%;              /* #C4392F */

  /* --- Schriften -------------------------------------------------------- */
  --font-headline: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* --- Grössenstufen (App-orientiert, kompakt) ------------------- */
  --fs-display: 3.5rem;   /* 56px */
  --fs-h1: 2.75rem;   /* 44px */
  --fs-h2: 2.125rem;   /* 34px */
  --fs-h3: 1.625rem;   /* 26px */
  --fs-h4: 1.25rem;   /* 20px */
  --fs-body-l: 1.125rem;   /* 18px */
  --fs-body: 1rem;   /* 16px */
  --fs-small: 0.875rem;   /* 14px */
  --fs-caption: 0.75rem;   /* 12px */

  /* --- Form und Rhythmus ------------------------------------------------ */
  --radius: 0.25rem;
  --hairline: 1px;
  --section-y: 5rem;
  --section-y-lg: 8rem;
  --measure: 62ch;
  --ease: cubic-bezier(.22,.61,.36,1);
}

.theme-light,
[data-theme="light"] {
  --bg: 210 22% 96%;            /* #F4F6F8 */
  --bg-raised: 0 0% 100%;            /* #FFFFFF */
  --surface: 213 24% 93%;            /* #E8ECF1 */
  --fg: 215 51% 11%;            /* #0E1A2B */
  --fg-strong: 216 50% 8%;            /* #0A121E */
  --fg-muted: 213 17% 43%;            /* #5A6B80 */
  --border: 212 22% 86%;            /* #D5DCE4 */
  --accent: 197 100% 30%;            /* #00709B */
  --on-accent: 0 0% 100%;            /* #FFFFFF */
  --swim: 203 37% 39%;             /* #3E6B87 */
  --bike: 39 70% 32%;             /* #8A6318 */
  --run: 131 21% 39%;             /* #4F7A57 */
  --z1: 196 31% 43%;              /* #4B7C8E */
  --z2: 180 46% 33%;              /* #2E7B7B */
  --z3: 47 68% 32%;              /* #87701A */
  --z4: 26 79% 39%;              /* #B25A15 */
  --z5: 4 64% 40%;              /* #A62E25 */
}

/* ==========================================================================
   Grundlagen
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: hsl(var(--bg));
  color: hsl(var(--fg));
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: hsl(var(--accent)); color: hsl(var(--on-accent)); }

:focus-visible {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 3px;
}

/* ==========================================================================
   Grössenstufen als Utilities — nur diese neun sind erlaubt
   ========================================================================== */

.t-display {
  font-family: var(--font-headline);
  font-size: var(--fs-display);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.t-h1 {
  font-family: var(--font-headline);
  font-size: var(--fs-h1);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.t-h2 {
  font-family: var(--font-headline);
  font-size: var(--fs-h2);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.t-h3 {
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.t-h4 {
  font-family: var(--font-headline);
  font-size: var(--fs-h4);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
}

.t-body-l {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.6;
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
}

.t-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
}

.t-caption {
  font-family: var(--font-data);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* Zahlen stehen immer in Tabellenziffern, sonst tanzen Spalten */
.t-data, .num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Wiederkehrende Bausteine
   ========================================================================== */

.eyebrow {
  font-family: var(--font-data);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(var(--accent));
}

.hairline { border: 0; border-top: var(--hairline) solid hsl(var(--border)); }

/* 62 Zeichen sind auf einem 390px-Display breiter als der Bildschirm — deshalb
   immer gegen die verfügbare Breite deckeln. */
.measure { max-width: min(var(--measure), 100%); }

/* ==========================================================================
   Schmale Bildschirme
   Die Stufen oben sind die Referenz für App und Desktop. Auf dem Handy werden
   nur die vier obersten Grade reduziert — Fliesstext bleibt unangetastet,
   sonst leidet die Lesbarkeit.
   ========================================================================== */

@media (max-width: 640px) {
  .t-display { font-size: 2.25rem; }   /* 36px */
  .t-h1      { font-size: 2rem; }      /* 32px */
  .t-h2      { font-size: 1.625rem; }  /* 26px */
  .t-h3      { font-size: 1.375rem; }  /* 22px */
}