/* ================================================================
   ALARYON — Design Tokens
   Single source of truth for all design values.
   Loaded before every other stylesheet.

   Color model: OKLCH throughout.
     - light-dark(light-value, dark-value) for theme-adaptive tokens
     - color-scheme: light dark enables OS theme detection
     - Both modes are first-class; neither is an afterthought.

   Dark mode: warm amber-tinted darks (NOT cold blue-black).
   Light mode: warm parchment/ivory, rich jewel-tone accents.
   ================================================================ */

:root {
  color-scheme: light dark;

  /* ---- Font families ---- */
  /* Rokkitt: humanist slab serif — warmth, personality, scales beautifully at hero sizes */
  /* Gentium Plus: multilingual (incl. Cyrillic), warm, designed for reading — prose */
  /* Jost: geometric-humanist hybrid with warmth and personality — UI labels */
  /* JetBrains Mono: monospaced, purposeful — player commands */
  --f-display: 'Rokkitt', Georgia, serif;
  --f-prose:   'Gentium Plus', Georgia, serif;
  --f-ui:      'Jost', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ---- Spacing scale (4pt base) ---- */
  --s1: 4px; --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;

  /* ---- Responsive prose size token ---- */
  --size-prose: 17px;

  /* ==============================================================
     BACKGROUNDS
     Light: warm parchment/ivory layered surfaces
     Dark:  warm amber-tinted layered darks (NOT cold blue-black)
     ============================================================== */

  /* Page background */
  --bg:          light-dark(oklch(94% 0.016 80), oklch(14% 0.018 220));

  /* Primary reading / codex surface — lightest in light, slightly raised in dark */
  --bg-codex:    light-dark(oklch(97% 0.008 82), oklch(16% 0.019 218));

  /* Panels, marginalia, sidebar — slightly recessed vs reading surface */
  --bg-surface:  light-dark(oklch(90% 0.020 77), oklch(20% 0.018 216));

  /* Hover states */
  --bg-hover:    light-dark(oklch(86% 0.024 75), oklch(26% 0.020 214));

  /* Raised elements: dropdowns, popovers */
  --bg-raised:   light-dark(oklch(88% 0.022 76), oklch(23% 0.019 215));

  /* HUD bar — semi-opaque over page background */
  --bg-hud:      light-dark(oklch(91% 0.018 78 / 0.94), oklch(13% 0.016 222 / 0.95));

  /* Card surface — same as codex (alias used by landing page components) */
  --bg-card:     var(--bg-codex);

  /* Alternate section bg — slightly differentiated from page bg */
  --bg-alt:      var(--bg-surface);

  /* Scrolled nav bar — slightly more opaque than HUD for legibility over hero images */
  --bg-nav:      light-dark(oklch(94% 0.016 80 / 0.94), oklch(13% 0.016 222 / 0.94));

  /* NPC dialogue block wash — faint gold tint */
  --bg-dlg:      light-dark(oklch(55% 0.17 65 / 0.06), oklch(74% 0.18 65 / 0.05));

  /* Tutor tip block — very faint gold wash */
  --bg-tip:      light-dark(oklch(55% 0.17 65 / 0.04), oklch(74% 0.18 65 / 0.03));

  /* Modal / drawer backdrop */
  --bg-backdrop: light-dark(oklch(17% 0.018 65 / 0.40), oklch(5% 0.005 52 / 0.55));

  /* ==============================================================
     TEXT HIERARCHY
     All values target WCAG AA contrast on their respective surfaces.
     Warm-tinted neutrals — never cold gray on warm backgrounds.
     ============================================================== */

  /* Primary prose — deep warm ink (light) / warm cream (dark) */
  --t1: light-dark(oklch(17% 0.018 65), oklch(91% 0.015 80));

  /* Secondary labels — ~5.5:1 on bg-codex */
  --t2: light-dark(oklch(30% 0.016 65), oklch(76% 0.018 78));

  /* De-emphasized — ~4.2:1; use ≥13px or bold */
  --t3: light-dark(oklch(46% 0.013 65), oklch(59% 0.015 75));

  /* Muted — ~3:1; use for uppercase/large text only */
  --t4: light-dark(oklch(63% 0.010 65), oklch(42% 0.012 70));

  /* ==============================================================
     SEMANTIC COLORS
     Hues are language-learning vocabulary anchors — preserved across themes.
     Only lightness/chroma adapts per theme for legibility.

     Gold  = NPCs / people  → social vocabulary
     Rose  = monsters/danger → combat vocabulary
     Sage  = directions      → directional vocabulary
     Blue  = items/objects   → material vocabulary
     ============================================================== */

  /* Gold — NPCs, accents, interactive elements, ornaments */
  --gold:   light-dark(oklch(55% 0.17 65), oklch(74% 0.18 65));
  /* Gold tint — dialogue backgrounds, card borders */
  --gold-d: light-dark(oklch(55% 0.17 65 / 0.14), oklch(74% 0.18 65 / 0.15));
  /* Gold wash — very subtle surface tint */
  --gold-dd:light-dark(oklch(55% 0.17 65 / 0.07), oklch(74% 0.18 65 / 0.07));

  /* Rose — monsters, danger, damage, combat mode */
  --rose:   light-dark(oklch(48% 0.22 22), oklch(67% 0.23 22));
  /* Rose tint — combat state borders, danger backgrounds */
  --rose-d: light-dark(oklch(48% 0.22 22 / 0.16), oklch(67% 0.23 22 / 0.18));

  /* Sage — directions, exits, healthy HP, player commands */
  --sage:   light-dark(oklch(44% 0.16 152), oklch(64% 0.17 152));
  /* Sage tint — command block background */
  --sage-d: light-dark(oklch(44% 0.16 152 / 0.12), oklch(64% 0.17 152 / 0.14));

  /* Blue — items, objects, learning elements */
  --blue:   light-dark(oklch(44% 0.17 240), oklch(65% 0.17 240));
  /* Blue tint — item pill backgrounds */
  --blue-d: light-dark(oklch(44% 0.17 240 / 0.10), oklch(65% 0.17 240 / 0.12));

  /* Purple — XP, player identity */
  --purple: light-dark(oklch(44% 0.19 290), oklch(66% 0.19 290));

  /* ==============================================================
     BORDERS
     Adaptive — dark ink at low opacity (light) / warm cream at low opacity (dark)
     ============================================================== */

  /* Subtle structural divider */
  --border:   light-dark(oklch(17% 0.018 65 / 0.10), oklch(91% 0.015 80 / 0.10));
  /* Standard border — card edges, input outlines */
  --border-m: light-dark(oklch(17% 0.018 65 / 0.18), oklch(91% 0.015 80 / 0.18));
  /* Prominent border — focused inputs, selected states */
  --border-l: light-dark(oklch(17% 0.018 65 / 0.28), oklch(91% 0.015 80 / 0.28));
}

/* Prose size reduction on tablet — applied here so it applies to all sheets */
@media (max-width: 959px) {
  :root { --size-prose: 15px; }
}

/* ================================================================
   GLOBAL RESET + BASE
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ================================================================
   ACCESSIBILITY
   ================================================================ */

/* Visible focus ring for keyboard users on every interactive element (WCAG 2.4.7).
   :focus-visible avoids showing the outline on mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip link — visually hidden until focused (WCAG 2.4.1 Bypass Blocks) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--gold);
  color: var(--bg);
  font-family: var(--f-ui);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: top 0.15s ease-out;
}
.skip-link:focus { top: 8px; }

/* Respect user preference for reduced motion — strip transitions, keep layout intact. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}