/* ═══════════════════════════════════════════════════════════
   HELHEIMRS — Design tokens
   Dark ("Helheim") is the default. Frost is the light mode.
   Every text pair below is checked against its real surface.
   ═══════════════════════════════════════════════════════════ */

@font-face { font-family: 'Estedad'; src: url('../assets/fonts/Estedad-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Estedad'; src: url('../assets/fonts/Estedad-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Estedad'; src: url('../assets/fonts/Estedad-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }
/* Self-hosted Elder Futhark subset: no platform serif carries U+16A0–16F8,
   so a blocked Google Fonts request would turn every rune ornament into tofu. */
@font-face { font-family: 'Noto Sans Runic'; src: url('../assets/fonts/NotoSansRunic-Runic.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+16A0-16F8; }

:root {
  /* ── Brand palette (fixed, theme-independent) ── */
  --void: #0A0A0B;
  --basalt: #1A1B1D;
  --basalt-2: #2A2C2F;
  --basalt-3: #3A3D41;
  --emerald: #2FD39A;
  --emerald-soft: #7BE6C0;
  --jade: #0F6B4F;
  --jade-deep: #084235;
  --frost: #EDEFEA;
  --ember: #C23A2B;
  --ember-soft: #E0654F;

  /* ── Semantic (dark / Helheim) ── */
  --bg: var(--void);
  --bg-elev: var(--basalt);
  --bg-elev-2: var(--basalt-2);
  --bg-elev-3: var(--basalt-3);
  --bg-veil: rgba(10,10,11,.72);
  --fg: #D9DCD6;               /* body text — 15.0:1 on void */
  --fg-strong: var(--frost);   /* headings, values */
  --fg-muted: #9EA39C;         /* secondary text — 5.4:1 on void, 4.7:1 on stone */
  --fg-faint: #8F948E;         /* smallest real text — 6.4:1 void, 4.5:1 on bg-elev-2 */
  --ornament: #6A6F69;         /* NOT text: runes, dividers, crumb separators only */
  --accent: var(--emerald);
  --accent-fg: #07110D;        /* text sitting on --emerald-grad */
  --accent-2: var(--jade);
  --accent-text: #4BE2AE;      /* emerald tuned for text on dark — 10.7:1 */
  --line: rgba(237,239,234,.08);
  --line-strong: rgba(237,239,234,.16);
  --line-glow: rgba(47,211,154,.45);
  --danger: #EA7A66;           /* 5.3:1 on stone, 4.8:1 on the danger-tag tint */
  --danger-bg: rgba(194,58,43,.14);

  /* ── Light hierarchy. Emerald is LIGHT, not paint: spend it on one live
     thing per view. --glow = live/primary, --glow-soft = hover answer,
     --glow-strong = hero moments only, --glow-inset = ring inside a clipped shape. ── */
  --glow: 0 0 18px rgba(47,211,154,.35), 0 0 48px rgba(47,211,154,.14);
  --glow-soft: 0 0 12px rgba(47,211,154,.2);
  --glow-strong: 0 0 10px rgba(47,211,154,.7), 0 0 34px rgba(47,211,154,.45), 0 0 90px rgba(47,211,154,.2);
  --glow-inset: inset 0 0 0 1px rgba(47,211,154,.5), inset 0 0 22px rgba(47,211,154,.18);
  --glow-inset-soft: inset 0 0 0 1px var(--line-glow), inset 0 0 18px rgba(47,211,154,.12);

  /* ── Stone. Carved, not floating: --shadow-stone is inset only, because
     clip-path clips outer shadows and every consumer is clipped.
     Use --shadow-drop as a filter on an UNCLIPPED wrapper when lift is needed. ── */
  --shadow-stone: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -34px 52px -34px rgba(0,0,0,.88), inset 0 -1px 0 rgba(0,0,0,.55);
  --shadow-drop: drop-shadow(0 18px 24px rgba(0,0,0,.5));
  /* two faint cut planes across the slab so stone reads as faceted, not as a grey card */
  --stone-face: linear-gradient(118deg, rgba(255,255,255,.032) 0 21%, rgba(255,255,255,.006) 21.4% 53%, rgba(0,0,0,.17) 53.4% 100%);
  --stone-grad: var(--stone-face), linear-gradient(160deg, #26282B 0%, #1A1B1D 45%, #131416 100%);
  --stone-grad-2: var(--stone-face), linear-gradient(160deg, #34373B 0%, #232527 50%, #18191B 100%);
  --emerald-grad: linear-gradient(180deg, var(--emerald) 0%, var(--jade) 100%);
  --grain-opacity: .05;
  --fog-color: 120,140,135;
  --mode-light: 0;

  /* ── Type ── */
  --font-display: 'Estedad', 'Vazirmatn', sans-serif;
  --font-body: 'Vazirmatn', system-ui, sans-serif;
  --font-rune: 'Noto Sans Runic', 'Segoe UI Historic', 'BabelStone Runic', serif;
  --font-latin: 'Cinzel', 'Georgia', serif;
  --fs-2xs: .75rem;            /* 12px — absolute floor for Persian UI labels */
  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.185rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: clamp(2rem, 4.5vw, 2.75rem);
  --fs-4xl: clamp(2.6rem, 6vw, 4.6rem);
  --fs-page: clamp(2rem, 4.6vw, 3.4rem);   /* detail-view H1 (article, quest, spell, docs) */
  --fs-hero: clamp(2.8rem, 7vw, 5.2rem);   /* the one hero exception: home gate */
  --lh-body: 1.85;
  --lh-tight: 1.25;
  /* one ornament scale, so the same rune is not eleven sizes */
  --rune-sm: .95rem;
  --rune-md: 1.25rem;
  --rune-lg: 1.6rem;

  /* ── Space (4pt, with one sanctioned half-step) ── */
  --s-half: 6px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 68ch;
  --max: 1280px;

  /* ── Shape ── */
  --r-0: 0px; --r-1: 2px; --r-2: 4px; --r-pill: 999px;
  --facet: 14px;
  --clip-arch: polygon(50% 0, 100% 22%, 100% 100%, 0 100%, 0 22%);
  --clip-hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --clip-shield: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);

  /* ── Motion ── */
  --ease-stone: cubic-bezier(.2,.8,.2,1);
  --ease-heavy: cubic-bezier(.7,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: 180ms;
  --t-ui: 360ms;
  --t-slow: 600ms;
  --t-hero: 1600ms;

  /* ── Z ── */
  --z-nav: 50; --z-tray: 80; --z-modal: 100; --z-portal: 200; --z-raven: 210; --z-cursor: 300;

  color-scheme: dark;
}

/* var() inside a custom property is substituted where the property is DECLARED.
   A :root-level polygon would therefore bake in --facet:14px and silently ignore
   every per-element override (.btn 8px, .chip 6px, .tip 8px …). Declaring the
   polygons on every element re-computes them against that element's own --facet. */
*, *::before, *::after {
  --clip-facet: polygon(0 0, calc(100% - var(--facet)) 0, 100% var(--facet), 100% 100%, var(--facet) 100%, 0 calc(100% - var(--facet)));
  --clip-facet-2: polygon(var(--facet) 0, 100% 0, 100% calc(100% - var(--facet)), calc(100% - var(--facet)) 100%, 0 100%, 0 var(--facet));
}

/* ── Frost (light) mode ──
   Designed, not inverted: jade carries the accent, emerald survives only as glow. */
/* ── Declaring dark support, so no browser rewrites the colours for us ──
   A forced dark mode (Samsung Internet's "Dark mode", Chrome's Auto Dark) decides
   whether to repaint a page by asking whether the stylesheet answers
   prefers-color-scheme at all. This sheet answered it nowhere, so the site was
   classified as light-only and inverted on the phone: the basalt portal turned
   pale silver, the Gatekeeper went grey, and the emerald buttons turned dark with
   white labels. The `color-scheme` property alone was not enough — that one is
   read by Chrome's implementation, not Samsung's.

   Every value below is exactly what :root already declares, so this changes
   nothing about how the site looks. It exists to be found. Scoped
   :not([data-theme="light"]) so choosing Frost still wins on a dark OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--void);
    --bg-elev: var(--basalt);
    --fg: #D9DCD6;
    --line: rgba(237,239,234,.08);
  }
}

:root[data-theme="light"] {
  --bg: #E6E8E2;
  --bg-elev: #F1F2EE;
  --bg-elev-2: #FAFAF8;
  --bg-elev-3: #FFFFFF;
  --bg-veil: rgba(230,232,226,.78);
  --fg: #1F2220;
  --fg-strong: #0E100F;
  --fg-muted: #4E544F;
  --fg-faint: #5F655F;         /* 4.8:1 on the page ground */
  --ornament: #7A807B;
  --accent: var(--jade);
  --accent-fg: #F4FBF8;
  --accent-2: var(--emerald);
  --accent-text: #0C5A42;
  --line: rgba(14,16,15,.1);
  --line-strong: rgba(14,16,15,.2);
  --line-glow: rgba(15,107,79,.45);
  --danger: #A62E21;
  --danger-bg: rgba(194,58,43,.1);
  --glow: 0 0 18px rgba(47,211,154,.28), 0 0 48px rgba(47,211,154,.1);
  --glow-soft: 0 0 12px rgba(47,211,154,.18);
  --glow-strong: 0 0 10px rgba(47,211,154,.5), 0 0 34px rgba(47,211,154,.3);
  --glow-inset: inset 0 0 0 1px rgba(15,107,79,.5), inset 0 0 22px rgba(47,211,154,.12);
  --glow-inset-soft: inset 0 0 0 1px var(--line-glow), inset 0 0 14px rgba(47,211,154,.08);
  --shadow-stone: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -30px 44px -34px rgba(20,24,22,.28), inset 0 -1px 0 rgba(20,24,22,.1);
  --shadow-drop: drop-shadow(0 14px 18px rgba(20,24,22,.16));
  --stone-face: linear-gradient(118deg, rgba(255,255,255,.55) 0 21%, rgba(255,255,255,0) 21.4% 53%, rgba(20,24,22,.045) 53.4% 100%);
  --stone-grad: var(--stone-face), linear-gradient(160deg, #F7F8F5 0%, #ECEDE8 45%, #DFE1DA 100%);
  --stone-grad-2: var(--stone-face), linear-gradient(160deg, #FFFFFF 0%, #F1F2EE 50%, #E4E6E0 100%);
  /* The gradient itself must carry the contrast: --accent-fg is near-white and
     #F4FBF8 on raw emerald is 1.8:1. Jade-dark keeps every primary control ≥ 5:1. */
  --emerald-grad: linear-gradient(180deg, #117A56 0%, var(--jade-deep) 100%);
  --grain-opacity: .035;
  --fog-color: 200,208,204;
  --mode-light: 1;
  color-scheme: light;
}