/* ==========================================================================
   Designsprache Portfolio 2026 · Web-Tokens v0.1
   Quelle: _context/01-styleguide.md (Slide-Werte 1920 × 1080).
   Regel: 1 Slide-px = 1/19.2 vw. Ab 1920 px Viewport ist alles 1:1 wie die
   Slide, darunter skaliert es proportional – mit Untergrenzen für Mobile.
   ========================================================================== */

:root {
  /* --- Farben (Styleguide 2) ------------------------------------------ */
  --light: #f2f2f0;
  --dark: #161616;
  --slot: #ccccc9;
  --white: #ffffff;
  --cv-green: #003909;
  --enbw-blue: #000099;
  --yello: #fff100;
  --milk-black: #212121;
  --spende-magenta: #a5197d;
  --hallodealer-yellow: #ffc107;
  --mbds-wireframe: #424242;

  /* Semantik – Theme Light ist der Default. Jede Section setzt per
     data-theme nur diese zwei Variablen um; alles andere leitet sich ab. */
  --surface: var(--light);
  --on-surface: var(--dark);
  /* Abgeleitete Flächen: Formularfeld und Code – keine neuen Farben,
     sondern 7 % onSurface in die Fläche gemischt. */
  --field: color-mix(in srgb, var(--on-surface) 7%, var(--surface));

  /* --- Schrift (Styleguide 3) ----------------------------------------- */
  --font: "Google Sans Flex", "Google Sans", system-ui, sans-serif;
  --w-regular: 400;
  --w-medium: 500;

  /* Slide-Einheit: 1 Slide-px als vw. Für Breiten, die proportional
     mitskalieren sollen: width: calc(385 * var(--su)). */
  --su: 0.0520833vw;

  /* Skala: Slide-px → clamp(Untergrenze, vw, Slide-Wert). */
  --fs-display:   clamp(96px, 15.625vw, 300px);  --lh-display: 0.9;
  --fs-h1:        clamp(48px, 6.667vw, 128px);   --lh-h1: 1.02;
  --fs-h2:        clamp(36px, 4.583vw, 88px);    --lh-h2: 1.06;
  --fs-num:       clamp(40px, 4.583vw, 88px);    --lh-num: 1;
  --fs-statement: clamp(24px, 2.083vw, 40px);    --lh-statement: 1.68;
  --fs-interline: clamp(24px, 2.083vw, 40px);    --lh-interline: 1.3;
  --fs-label:     clamp(22px, 2.083vw, 40px);    --lh-label: 1.25;
  --fs-sub:       clamp(19px, 1.5625vw, 30px);   --lh-sub: 1.4;
  --fs-body:      clamp(17px, 1.25vw, 24px);     --lh-body: 1.45;
  --fs-meta:      clamp(13px, 0.833vw, 16px);    --lh-meta: 1.4;

  /* --- Raster (Styleguide 4) ------------------------------------------ */
  --margin: clamp(20px, 5.208vw, 100px);   /* 100 / 1920 */
  --content-max: 1720px;                   /* 1920 − 2 × 100 */
  --bar-h: 48px;                           /* Höhe von Nav- und Meta-Zeile */

  /* --- Abstände (Styleguide 5), Slide-px proportional mit Untergrenze -- */
  --sp-8:   clamp(4px,  0.417vw,  8px);
  --sp-12:  clamp(6px,  0.625vw,  12px);
  --sp-20:  clamp(12px, 1.042vw,  20px);
  --sp-24:  clamp(14px, 1.25vw,   24px);
  --sp-40:  clamp(20px, 2.083vw,  40px);
  --sp-52:  clamp(24px, 2.708vw,  52px);
  --sp-70:  clamp(32px, 3.646vw,  70px);
  --sp-100: clamp(40px, 5.208vw,  100px);
  --sp-150: clamp(56px, 7.813vw,  150px);
  --sp-320: clamp(96px, 16.667vw, 320px);

  /* --- Bewegung (Web-Guideline 6) ------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-micro: 240ms;     /* Hover, Farbwechsel */
  --dur-reveal: 720ms;    /* Einblenden beim Scrollen */
  --dur-count: 1200ms;    /* Zahlen hochzählen */
  --reveal-shift: 24px;   /* Versatz beim Einblenden, 16–24 px */
  --stagger: 80ms;        /* Versatz zwischen Geschwistern */
}

/* --- Kapitel-Themes --------------------------------------------------------
   Eine Referenz wird komplett in einem Theme gezeigt. onSurface auf farbigen
   Flächen ist immer Light, nie Weiß; auf Gelb ist es Dark. */
[data-theme="light"]       { --surface: var(--light);             --on-surface: var(--dark); }
[data-theme="green"]       { --surface: var(--cv-green);          --on-surface: var(--light); }
[data-theme="blue"]        { --surface: var(--enbw-blue);         --on-surface: var(--light); }
[data-theme="yello"]       { --surface: var(--yello);             --on-surface: var(--dark); }
[data-theme="milk"]        { --surface: var(--milk-black);        --on-surface: var(--light); }
[data-theme="magenta"]     { --surface: var(--spende-magenta);    --on-surface: var(--light); }
[data-theme="hallodealer"] { --surface: var(--hallodealer-yellow); --on-surface: var(--dark); }
[data-theme="mbds"]        { --surface: var(--mbds-wireframe);    --on-surface: var(--light); }