/* -------------------------------------------------------------------------
   1. GLOBAL PALETTE TOKENS & BASE VARIABLES
   ------------------------------------------------------------------------- */
:root {
  /* Physical World / Manor Palette */
  --palette-parchment-dark: #1a1614;
  --palette-parchment-panel: #27211e;
  --palette-ink-black: #e2d9cf;
  --palette-mahogany: #4a2511;
  --palette-mahogany-light: #6e391b;
  --palette-gold-accent: #d4af37;
  --palette-warm-amber: rgba(255, 180, 100, 0.35);

  /* Computer Terminal Palette */
  --palette-terminal-bg: #050b14;
  --palette-terminal-text: #00ffcc;
  --palette-neon-cyan: #00ffff;
  --palette-dark-blue: #001e3d;
  --palette-terminal-glow: rgba(0, 255, 204, 0.25);

  /* Ancient Cairn Palette */
  --palette-void-black: #090c0e;
  --palette-slate-gray: #1e252b;
  --palette-silver: #d1d5db;
  --palette-emerald-rune: #10b981;
  --palette-rune-glow: rgba(16, 185, 129, 0.4);

  /* Purge Emergency Palette */
  --palette-crimson-bg: #1a0505;
  --palette-blood-crimson: #990000;
  --palette-strobe-red: #ff1a1a;
  --palette-warning-amber: #f59e0b;
  --palette-purge-glow: rgba(255, 26, 26, 0.4);

  /* Semantic Color Tokens (non-theme) */
  --color-danger: #ef4444;
  --color-danger-glow: rgba(239, 68, 68, 0.15);
  --color-warning: #f59e0b;

  /* Typography Families */
  --font-serif-primary: 'Playfair Display', Georgia, serif;
  --font-serif-ancient: 'Cinzel', 'Times New Roman', serif;
  --font-mono-terminal: 'Fira Code', 'Courier New', monospace;

  /* Global Layout Dimensions */
  --hud-height: 60px;
  --drawer-width: 380px;

  /* Primitive Spacing Tokens */
  --space-sm: 0.5rem;
  --space-lg: 1.5rem;

  /* Semantic Layout Tokens */
  --drawer-bar-padding: var(--space-sm) var(--space-lg);
  --space-outer-padding: clamp(0.75rem, 2.5vw, 2rem);
  --space-region-gap: clamp(1rem, 2.5vw, 2rem);

  /* Border Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Letter Spacing */
  --tracking-wide: 0.05em;

  /* Surface Overlays */
  --surface-overlay-subtle: rgba(0, 0, 0, 0.2);
  --surface-overlay-medium: rgba(0, 0, 0, 0.3);
  --surface-overlay-heavy: rgba(0, 0, 0, 0.4);

  /* Global Default Theme Tokens (Physical World Default) */
  --color-bg: var(--palette-parchment-dark);
  --color-panel-bg: var(--palette-parchment-panel);
  --color-text: var(--palette-ink-black);
  --color-border: var(--palette-mahogany);
  --color-border-active: var(--palette-gold-accent);
  --color-accent: var(--palette-gold-accent);
  --color-shadow: var(--palette-warm-amber);

  --font-primary: var(--font-serif-primary);
  --font-mono: var(--font-mono-terminal);

  --line-height-narrative: 1.75;
  --letter-spacing: 0.015em;
  --text-glow: none;

  /* Transition Speeds */
  --speed-theme-transition: 0.8s ease-in-out;
  --speed-drawer-transition: 0.35s ease-in-out;
  --speed-fade-in: 0.4s ease-out;
  --speed-hover: 0.25s ease;
}

/* =========================================================================
   2-LAYER TYPOGRAPHY DESIGN TOKEN ARCHITECTURE

   IMPORTANT: Raw + Semantic font tokens MUST live on .app-root (not :root).
   CSS custom properties containing var() are resolved at computed-value time
   on the element where they're defined. If defined on :root, the calc()
   expressions bake in :root's --font-scale-ratio (1.0) and the inherited
   result never changes when .app-root overrides --font-scale-ratio.
   By defining them here on .app-root — the same element that receives the
   text-scale-* modifier class — they re-evaluate correctly.
   ========================================================================= */
.app-root {
  /* LAYER 1: RAW PRIMITIVE TYPOGRAPHY SCALAR TOKENS */
  --font-scale-ratio: 1.0;

  --font-raw-xs:   calc(0.72rem  * var(--font-scale-ratio));
  --font-raw-sm:   calc(0.85rem  * var(--font-scale-ratio));
  --font-raw-base: calc(1.0rem   * var(--font-scale-ratio));
  --font-raw-md:   calc(1.125rem * var(--font-scale-ratio));
  --font-raw-lg:   calc(1.25rem  * var(--font-scale-ratio));
  --font-raw-xl:   calc(1.5rem   * var(--font-scale-ratio));
  --font-raw-2xl:  calc(1.85rem  * var(--font-scale-ratio));

  /* LAYER 2: SEMANTIC COMPONENT TYPOGRAPHY TOKENS */
  --font-size-base: var(--font-raw-md);

  /* HUD */
  --font-size-hud-title:  var(--font-raw-lg);
  --font-size-hud-item:   var(--font-raw-sm);
  --font-size-hud-label:  var(--font-raw-xs);
  --font-size-hud-btn:    var(--font-raw-sm);
  --font-size-hud-badge:  var(--font-raw-xs);

  /* Narrative & AI */
  --font-size-narrative:       var(--font-raw-md);
  --font-size-speaker-tag:     var(--font-raw-base);
  --font-size-ai-prompt-input: var(--font-raw-sm);

  /* Options / Selections */
  --font-size-option-text:   var(--font-raw-base);
  --font-size-option-prefix: var(--font-raw-sm);

  /* Journal Drawer */
  --font-size-journal-title:        var(--font-raw-lg);
  --font-size-journal-ambient:      var(--font-raw-xs);
  --font-size-journal-tab:          var(--font-raw-xs);
  --font-size-journal-card-title:   var(--font-raw-base);
  --font-size-journal-stat-label:   var(--font-raw-xs);
  --font-size-journal-stat-value:   var(--font-raw-sm);
  --font-size-journal-badge:        var(--font-raw-xs);
  --font-size-journal-body:         var(--font-raw-sm);
  --font-size-journal-help-summary: var(--font-raw-sm);
  --font-size-journal-help-text:    var(--font-raw-xs);

  /* Modal */
  --font-size-modal-title:    var(--font-raw-lg);
  --font-size-modal-subtitle: var(--font-raw-xs);
  --font-size-modal-body:     var(--font-raw-sm);
  --font-size-modal-btn:      var(--font-raw-sm);

  /* Game Over */
  --font-size-gameover-title:  var(--font-raw-2xl);
  --font-size-gameover-reason: var(--font-raw-md);
}

/* -------------------------------------------------------------------------
   TEXT SIZE ACCESSIBILITY MODIFIER CLASSES

   These override --font-scale-ratio on .app-root. Because the raw + semantic
   tokens are also defined on .app-root, they re-evaluate with the new ratio.
   ------------------------------------------------------------------------- */
.app-root.text-scale-normal {
  --font-scale-ratio: 1.0;
}

.app-root.text-scale-large {
  --font-scale-ratio: 1.15;
}

.app-root.text-scale-very-large {
  --font-scale-ratio: 1.32;
}

.app-root.text-scale-huge {
  --font-scale-ratio: 1.50;
}