/* ==========================================================================
   EVO — Design tokens (v5)
   Reference width 1920px. Every colour comes from the Figma brand board.
   Defined BEFORE any layout CSS so the Figma handoff maps 1:1 to variables.
   ========================================================================== */

@font-face {
  font-family: "Konfus";
  src: url("../assets/fonts/Konfus-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colour: brand (Figma) --------------------------------------------- */
  --c-deep-blue: #0e162b;
  --c-beige: #b9aba4;
  --c-stone: #202020;
  --c-white: #ffffff;
  --c-black: #000000;
  --c-paper: #efe9e5;

  /* ---- Colour: derived from brand ---------------------------------------- */
  --c-deep-blue-2: #17213a;                 /* raised surface on deep blue   */
  --c-deep-blue-3: #2e3750;                 /* brand stroke-line colour       */
  --c-deep-blue-4: #1b2336;                 /* highlighted step (v4/v5)       */
  --c-beige-2: #d6cbc5;                     /* beige highlight (footer heads) */
  --c-beige-3: #8f847e;                     /* beige muted                    */
  --c-stone-2: #2c2c2c;
  --c-error: #d98c82;

  /* ---- Theme (dark default; chapters switch via html[data-theme]) -------- */
  --t-bg: var(--c-black);
  --t-fg: var(--c-white);
  --t-fg-2: rgba(255, 255, 255, 0.8);
  --t-fg-3: rgba(255, 255, 255, 0.46);
  --t-line: rgba(255, 255, 255, 0.14);
  --t-line-2: rgba(255, 255, 255, 0.3);
  --t-accent: var(--c-beige);
  --t-surface: rgba(255, 255, 255, 0.04);
  --t-btn-bg: var(--c-white);
  --t-btn-fg: var(--c-deep-blue);

  /* ---- Type (Figma sizes at 1920; scale down with the viewport, floors keep
          text at 16px minimum on small screens) ------------------------------ */
  --f-display: "Konfus", "Times New Roman", serif;
  --f-body: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero:  clamp(3.5rem, 8.4vw, 10rem);       /* 160px: Strom / Gas        */
  --fs-h1:    clamp(3rem, 6.25vw, 7.5rem);       /* 120px: hero title, FAQ    */
  --fs-h2:    clamp(2.5rem, 4.6vw, 5.5rem);      /*  88px: section titles     */
  --fs-h2s:   clamp(2.25rem, 3.75vw, 4.5rem);    /*  72px: banner             */
  --fs-h3:    clamp(1.85rem, 2.5vw, 3rem);       /*  48px                     */
  --fs-h4:    clamp(1.5rem, 1.66vw, 2rem);       /*  32px                     */
  --fs-h5:    clamp(1.25rem, 1.25vw, 1.5rem);    /*  24px                     */
  --fs-lead:  clamp(1.125rem, 1.25vw, 1.5rem);   /*  24px                     */
  --fs-text-l: clamp(1.0625rem, 1.04vw, 1.25rem);/*  20px                     */
  --fs-body:  clamp(1rem, 0.83vw, 1rem);         /*  16px (never smaller)     */
  --fs-small: clamp(0.875rem, 0.73vw, 0.875rem); /*  14px                     */
  --fs-caps:  clamp(0.75rem, 0.625vw, 0.75rem);  /*  12px                     */
  --fs-label: var(--fs-body);

  --lh-display: 1;
  --lh-title: 1.1;
  --lh-tight: 1.2;
  --lh-body: 1.6;

  --ls-display: 0;
  --ls-caps: 0.02em;

  /* ---- Spacing (Figma steps at 1920; large steps scale) ------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: clamp(2.5rem, 3.33vw, 4rem);      /* 64  */
  --s-9: clamp(3.5rem, 5vw, 6rem);         /* 96  */
  --s-10: clamp(5rem, 8.33vw, 10rem);      /* 160 */

  --section-y: clamp(5rem, 6.25vw, 7.5rem);  /* 120 @1920 */
  --gutter: clamp(1.25rem, 4.16vw, 5rem);    /* 80  @1920 */
  --container: 1920px;
  --measure: 44ch;

  /* ---- Radius ----------------------------------------------------------- */
  --r-1: 0;
  --r-2: 0;
  --r-3: 12px;
  --r-pill: 90px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 240ms;
  --dur-base: 450ms;
  --dur-slow: 900ms;
  --dur-theme: 800ms;

  /* ---- Z ---------------------------------------------------------------- */
  --z-theme: 0;
  --z-content: 10;
  --z-menu: 90;
  --z-nav: 100;
  --z-preloader: 200;
}

/* Beige paper for the light chapter (brand board "Beige" card). */
html[data-theme="light"] {
  --t-bg: var(--c-beige);
  --t-fg: var(--c-deep-blue);
  --t-fg-2: rgba(14, 22, 43, 0.8);
  --t-fg-3: rgba(14, 22, 43, 0.5);
  --t-line: rgba(14, 22, 43, 0.16);
  --t-line-2: rgba(14, 22, 43, 0.32);
  --t-accent: var(--c-deep-blue);
  --t-surface: rgba(14, 22, 43, 0.06);
  --t-btn-bg: var(--c-deep-blue);
  --t-btn-fg: var(--c-white);
}
html[data-theme="blue"]  { --t-bg: var(--c-deep-blue); }
/* Paper chapters carry their own palette, so they arrive already in paper
   below a dark section (hard edge, as in the Figma layout). */
html[data-theme="paper"], [data-theme-section="paper"] {
  --t-bg: var(--c-paper);
  --t-fg: var(--c-deep-blue);
  --t-fg-2: rgba(14, 22, 43, 0.8);
  --t-fg-3: rgba(14, 22, 43, 0.5);
  --t-line: rgba(14, 22, 43, 0.18);
  --t-line-2: rgba(14, 22, 43, 0.34);
  --t-accent: var(--c-deep-blue);
  --t-surface: rgba(14, 22, 43, 0.06);
  --t-btn-bg: var(--c-deep-blue);
  --t-btn-fg: var(--c-white);
}
/* Their text colour too: inherited text would otherwise keep the page theme's
   (white while the html theme is still dark, e.g. with reduced motion). */
[data-theme-section="paper"] { color: var(--t-fg); }
/* Deep blue sections likewise paint themselves, so a light chapter never
   bleeds into them while the fixed theme layer is still fading. */
[data-theme-section="blue"] { background: var(--c-deep-blue); color: var(--c-white); }
html[data-theme="stone"] { --t-bg: var(--c-stone); }