/* HedgeFox v2 — design tokens. Single source: DESIGN-v2.md. Owner: art director; read-only for builders
   (ask for a new token instead of hard-coding a value). Only custom properties and @font-face live here:
   no selectors that style components.
   Contrast ratios (WCAG 2.x) for every text pair are listed in DESIGN-v2.md §1.3 and were computed, not guessed. */

/* ------------------------------------------------------------------ fonts (OFL, google/fonts, subset by tools/fonts_v2.py) */
@font-face {
  font-family: "HF Unbounded";
  src: url("/fonts/unbounded.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HF Rubik";
  src: url("/fonts/rubik.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HF Tiny5";
  src: url("/fonts/tiny5.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 85% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ================================================================ 1. palette: raw ramps */
  /* night purples — backgrounds of the season site and of the film */
  --hf-void: #0b0614;          /* film black, letterbox bars, deepest shadow */
  --hf-night-950: #120a1f;     /* page background */
  --hf-night-900: #1a0f2e;     /* alternate section, inputs */
  --hf-night-800: #241540;     /* cards, panels on dark */
  --hf-night-700: #31205a;     /* raised card, hover */
  --hf-night-600: #46307d;     /* borders, dividers on dark */
  /* vivid purples — comic skies, highlights, secondary accent */
  --hf-purple-700: #4b2a9a;    /* purple text on paper */
  --hf-purple-500: #6a3fd1;    /* vivid panel fill, SFX shadow, chips */
  --hf-purple-400: #8b62f0;    /* icons, non-text accents (3:1 on dark) */
  --hf-purple-300: #b39bff;    /* links and secondary text on dark */
  --hf-purple-200: #d8cbff;
  --hf-purple-100: #efe9ff;
  /* oranges — CTA, accents, the fox */
  --hf-orange-700: #a33d06;    /* orange text on paper */
  --hf-orange-600: #e0570f;    /* pressed CTA, CTA border */
  --hf-orange-500: #ff7a1a;    /* CTA */
  --hf-orange-400: #ff9640;    /* CTA hover, focus ring */
  --hf-orange-300: #ffb36b;    /* orange text on dark */
  --hf-orange-200: #ffd3a3;
  /* brass (Create) */
  --hf-brass-500: #f0a33a;
  --hf-brass-300: #f6c343;
  /* paper — comic pages, speech bubbles (tones match tools/textures_v2.py) */
  --hf-paper-50: #faf2dc;
  --hf-paper-light: #f8eed6;
  --hf-paper-100: #f3e6c4;     /* paper base */
  --hf-paper-200: #ecdcb4;     /* shade */
  --hf-paper-300: #e3cfa2;     /* fibre */
  --hf-paper-400: #d9c08b;     /* edge */
  --hf-paper-500: #b8955e;     /* outer edge */
  --hf-paper-muted: #6b5236;   /* secondary text on paper */
  --hf-bubble: #fffaf0;        /* speech bubble fill */
  /* ink */
  --hf-ink: #1b1124;           /* outlines and text on paper (purple-black) */
  --hf-ink-sprite: #17120d;    /* the comic sprites' own outline (tools/comic/sprites.py "k") */
  /* text on dark */
  --hf-text-100: #f4efff;
  --hf-text-300: #b7a9d9;
  /* status */
  --hf-green-400: #4fd18b;
  --hf-green-700: #17683a;
  --hf-red-400: #ff6b7a;
  --hf-red-700: #b42318;
  /* the Мгла (fog) */
  --hf-fog-100: #e4e0ee;
  --hf-fog-200: #c9c3d6;
  --hf-fog-300: #b9b6cc;
  --hf-fog-500: #9aa3b5;

  /* characters (docs/lor-create.md §2.9) */
  --hf-char-hog: #7bc96f;
  --hf-char-fox: #ff8c1a;
  --hf-char-owl: #e6d3a3;
  --hf-char-klepka: #c7703e;
  --hf-char-soroka: #8fb3ff;
  --hf-char-fog: #9aa3b5;

  /* chapter accents (title-card stripe, progress segment, chapter number) */
  --hf-ch-prolog: #ff9640;
  --hf-ch-1: #8fbf78;          /* Начало */
  --hf-ch-2: #63dcec;          /* Новый мир */
  --hf-ch-3: #ff8a6a;          /* Война */
  --hf-ch-4: #f6c343;          /* Лучшее из всех */
  --hf-ch-5: #c7703e;          /* Средневековье */
  --hf-ch-6: #6ec8ff;          /* Перезагрузка */
  --hf-ch-7: #ff9bd2;          /* Эпоха Лабубу */
  --hf-ch-8: #9aa3b5;          /* Изгородь и Мгла */
  --hf-ch-create: #ff7a1a;     /* Create */

  /* ================================================================ 1b. palette: roles (use these in components) */
  --hf-bg: var(--hf-night-950);
  --hf-bg-alt: var(--hf-night-900);
  --hf-surface: var(--hf-night-800);
  --hf-surface-raised: var(--hf-night-700);
  --hf-border: var(--hf-night-600);
  --hf-border-strong: var(--hf-purple-500);
  --hf-text: var(--hf-text-100);
  --hf-text-muted: var(--hf-text-300);
  --hf-link: var(--hf-purple-300);
  --hf-link-hover: var(--hf-orange-300);
  --hf-accent: var(--hf-orange-300);           /* accent TEXT on dark */
  --hf-accent-fill: var(--hf-purple-500);      /* accent SURFACE (white text allowed: 6.2:1) */
  --hf-cta: var(--hf-orange-500);
  --hf-cta-hover: var(--hf-orange-400);
  --hf-cta-pressed: var(--hf-orange-600);
  --hf-cta-text: var(--hf-ink);                /* never white on orange (2.6:1) */
  --hf-focus: var(--hf-orange-400);
  --hf-success: var(--hf-green-400);
  --hf-error: var(--hf-red-400);
  --hf-paper: var(--hf-paper-100);
  --hf-paper-text: var(--hf-ink);
  --hf-paper-text-muted: var(--hf-paper-muted);
  --hf-paper-accent: var(--hf-orange-700);
  --hf-paper-link: var(--hf-purple-700);
  --hf-paper-success: var(--hf-green-700);
  --hf-paper-error: var(--hf-red-700);
  --hf-sfx-fill: var(--hf-orange-400);         /* БАБАХ! */
  --hf-sfx-stroke: var(--hf-ink);
  --hf-sfx-shadow: var(--hf-purple-500);
  --hf-print-head: var(--hf-orange-500);       /* the line that "prints" colour into a panel */

  /* ================================================================ 1c. textures (root-absolute urls on purpose:
     a relative url() inside a custom property resolves against the stylesheet that USES it) */
  --hf-tex-paper: url("/tex/paper.png");          /* 64×64 tile */
  --hf-tex-edge-t: url("/tex/paper-edge-t.png");  /* 32×6 strips: deckled page edge (recipe: DESIGN-v2.md §1.5) */
  --hf-tex-edge-b: url("/tex/paper-edge-b.png");
  --hf-tex-edge-l: url("/tex/paper-edge-l.png");
  --hf-tex-edge-r: url("/tex/paper-edge-r.png");
  --hf-tex-night: url("/tex/night.png");          /* 32×32 tile */
  --hf-tex-fog: url("/tex/fog.png");              /* 128×32 tile, alpha, solid at the bottom */
  --hf-tex-grain: url("/tex/grain.png");          /* 64×64 tile, alpha, drawn 1:1 */
  --hf-tex-unit: 3px;                             /* CSS px per texture pixel: 3 on phones, 4 from 1024 px */
  --hf-tex-paper-size: 192px;                     /* 64 × unit */
  --hf-tex-edge-w: 18px;                          /* 6 × unit */
  --hf-tex-edge-len: 96px;                        /* 32 × unit */
  --hf-tex-night-size: 96px;                      /* 32 × unit */
  --hf-halftone: radial-gradient(rgba(27, 17, 36, .14) 1px, transparent 1.6px) 0 0 / 7px 7px;
  --hf-halftone-light: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.5px) 0 0 / 10px 10px;
  --hf-vignette: radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(11, 6, 20, .72) 100%);
  --hf-grain-opacity: .07;

  /* ================================================================ 2. typography */
  --hf-font-display: "HF Unbounded", "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  --hf-font-text: "HF Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --hf-font-pixel: "HF Tiny5", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --hf-pixel-print: "BLED" 12;                 /* printed-ink look for narration on paper */
  --hf-pixel-print-wet: "BLED" 40;             /* a just-printed letter (animate 40 → 12) */

  /* fluid scale (390 → 1440 px) */
  --hf-fs-xs: .8125rem;                                   /* 13 */
  --hf-fs-sm: .9375rem;                                   /* 15 */
  --hf-fs-md: 1.0625rem;                                  /* 17, body */
  --hf-fs-lg: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);  /* 18–21, lead */
  --hf-fs-xl: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);    /* 22–30, h3 */
  --hf-fs-2xl: clamp(1.75rem, 1.25rem + 2.4vw, 3rem);      /* 28–48, h2 */
  --hf-fs-3xl: clamp(2.125rem, 1.1rem + 4.6vw, 4.75rem);   /* 34–76, h1, chapter titles */
  --hf-fs-hero: clamp(2.25rem, 10.8vw, 8rem);             /* 36–128, «HEDGEFOX · CREATE»: the word is ≈ 7.1em wide = 77 % of the viewport */
  /* pixel font: one font pixel = font-size / 8, so 16/24/32/48 are perfectly crisp */
  --hf-fs-px-sm: 16px;                                    /* HUD, labels */
  --hf-fs-px-md: 20px;                                    /* narration on phones (2.5 px pixels, allowed) */
  --hf-fs-px-lg: 24px;                                    /* narration from 600 px */
  --hf-fs-px-xl: 32px;                                    /* title-card lines */
  --hf-fs-px-2xl: 48px;                                   /* big pixel numbers */
  --hf-lh-tight: 1.04;
  --hf-lh-heading: 1.12;
  --hf-lh-body: 1.55;
  --hf-lh-pixel: 1.4;
  --hf-tracking-display: -.01em;
  --hf-tracking-caps: .04em;
  --hf-tracking-pixel: .02em;
  --hf-measure: 62ch;

  /* ================================================================ 3. space, size, shape */
  --hf-sp-1: 4px;
  --hf-sp-2: 8px;
  --hf-sp-3: 12px;
  --hf-sp-4: 16px;
  --hf-sp-5: 24px;
  --hf-sp-6: 32px;
  --hf-sp-7: 48px;
  --hf-sp-8: 64px;
  --hf-sp-9: 96px;
  --hf-sp-10: 128px;
  --hf-gutter: 16px;                           /* page side gutter: 16 → 24 (≥600) → 32 (≥1200) */
  --hf-section-y: clamp(64px, 9vw, 128px);
  --hf-container: 1200px;
  --hf-container-narrow: 760px;
  --hf-page-max: 1100px;                       /* comic page width on desktop */
  --hf-header-h: 64px;
  --hf-tap: 44px;                              /* minimum touch target */

  --hf-r-0: 0;
  --hf-r-sm: 6px;
  --hf-r-md: 12px;
  --hf-r-lg: 20px;
  --hf-r-pill: 999px;
  --hf-notch: 4px;                             /* pixel-cut corner of buttons and chips */
  --hf-notch-lg: 8px;

  --hf-bw-ui: 1px;
  --hf-bw-ink: 3px;                            /* comic outline on phones */
  --hf-bw-ink-lg: 4px;                         /* comic outline from 1024 px */

  --hf-shadow-ink: 6px 6px 0 var(--hf-void);                     /* comic panel / page */
  --hf-shadow-pop: 3px 3px 0 var(--hf-ink);                      /* bubbles, SFX, small comic chips */
  --hf-shadow-card: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 48px -28px rgba(0, 0, 0, .85);
  --hf-glow-cta: 0 0 0 1px rgba(255, 122, 26, .35), 0 12px 36px -12px rgba(255, 122, 26, .6);
  --hf-glow-purple: 0 24px 64px -24px rgba(106, 63, 209, .65);
  --hf-bevel: inset 0 2px 0 rgba(255, 255, 255, .28), inset 0 -3px 0 rgba(0, 0, 0, .28); /* Minecraft button */
  --hf-bevel-pressed: inset 0 3px 0 rgba(0, 0, 0, .28), inset 0 -1px 0 rgba(255, 255, 255, .18);

  /* ================================================================ 4. layers */
  --hf-z-base: 0;
  --hf-z-raised: 1;
  --hf-z-sticky: 20;
  --hf-z-header: 30;
  --hf-z-film: 40;             /* the story film overlay (above the season page while it plays) */
  --hf-z-film-fx: 45;          /* grain, dust, vignette, letterbox inside the film */
  --hf-z-film-ui: 50;          /* film controls (skip, sound, play) */
  --hf-z-modal: 60;
  --hf-z-toast: 70;
  --hf-z-skip-link: 100;

  /* ================================================================ 5. motion */
  --hf-ease-out: cubic-bezier(.16, 1, .3, 1);          /* arrivals, reveals (expo out) */
  --hf-ease-cine: cubic-bezier(.65, 0, .35, 1);        /* camera moves between shots */
  --hf-ease-back: cubic-bezier(.34, 1.56, .64, 1);     /* bubble pop, SFX stamp, title letters */
  --hf-ease-in: cubic-bezier(.5, 0, .75, 0);           /* exits, fog rolling in */
  --hf-ease-ui: cubic-bezier(.2, 0, 0, 1);             /* buttons, hovers */
  --hf-dur-instant: 80ms;
  --hf-dur-fast: 160ms;
  --hf-dur-base: 280ms;
  --hf-dur-slow: 560ms;
  --hf-dur-cine: 1200ms;       /* camera move panel → panel */
  --hf-dur-title: 2400ms;      /* chapter title card hold */
  --hf-dur-inkin: 1300ms;      /* frame → ink → colour print */
  --hf-dur-page: 700ms;        /* page turn */
  --hf-type-ms: 32;            /* typewriter: ms per character (unitless, read by JS) */
  --hf-type-pause-comma: 120;
  --hf-type-pause-stop: 280;
  --hf-hold-base: 900;         /* after a line is typed: hold = base + per-char × length */
  --hf-hold-per-char: 45;
  --hf-motion: 1;              /* multiply distances/durations by this in JS; 0 under reduced motion */
}

/* side gutter steps */
@media (min-width: 600px) {
  :root { --hf-gutter: 24px; }
}
@media (min-width: 1024px) {
  :root { --hf-tex-unit: 4px; --hf-tex-paper-size: 256px; --hf-tex-edge-w: 24px; --hf-tex-edge-len: 128px; --hf-tex-night-size: 128px; }
}
@media (min-width: 1200px) {
  :root { --hf-gutter: 32px; }
}

/* reduced motion: everything that moves becomes a cut; JS reads --hf-motion or matchMedia */
@media (prefers-reduced-motion: reduce) {
  :root {
    --hf-dur-fast: 1ms;
    --hf-dur-base: 1ms;
    --hf-dur-slow: 1ms;
    --hf-dur-cine: 1ms;
    --hf-dur-inkin: 1ms;
    --hf-dur-page: 1ms;
    --hf-motion: 0;
    --hf-grain-opacity: 0;
  }
}

/* more contrast requested: no grain, no vignette, stronger borders */
@media (prefers-contrast: more) {
  :root {
    --hf-grain-opacity: 0;
    --hf-vignette: none;
    --hf-border: var(--hf-purple-400);
    --hf-text-muted: var(--hf-purple-100);
  }
}