/* Fonts load from index.html (<link rel="preconnect"> + stylesheet) — an
   @import here serialized the font CSS behind tokens.css and caused FOUT. */

:root {
  /* Palette — world-neutral base. Each world theme (fantasy-theme.css etc.)
     overrides these via html[data-world="<id>"]. Title / Altar / hero-select
     stay on this neutral palette so the menu doesn't read as one of the
     worlds. Stat colors (gold / heal / danger / mana) stay universal. */
  --c-bg: #0a0c12;
  --c-bg-alt: #11141c;
  --c-bg-warm: #161922;
  --c-surface: #181c28;
  --c-surface-light: #1f2433;
  --c-border: #262b3a;
  --c-border-glow: rgba(120, 135, 165, 0.22);

  --c-text: #dadee8;
  --c-text-dim: #7a8090;
  --c-text-bright: #ffffff;

  --c-accent: #8a99b8;
  --c-accent-dim: rgba(138, 153, 184, 0.15);
  --c-accent-glow: rgba(138, 153, 184, 0.35);
  /* Themed glow for shadows/auras — worlds inherit their own accent glow, so
     nothing leaks the old hardcoded purple. */
  --c-glow: var(--c-accent-glow);

  --c-gold: #d4a94e;
  --c-gold-dim: rgba(212, 169, 78, 0.15);
  --c-gold-glow: rgba(212, 169, 78, 0.4);
  /* Warm ember — keeps the OMNICRAWL wordmark metallic instead of fading to
     the cool grey accent. Worlds may override for a themed wordmark. */
  --c-ember: #ef7d2e;
  /* Torch light RGB triplet (used inside rgba() for the additive torch glow).
     Worlds override for cold/neon/sickly light. */
  --c-torch: 255, 206, 145;

  --c-heal: #5fb98a;
  --c-heal-dim: rgba(95, 185, 138, 0.15);
  --c-danger: #c94f56;
  --c-danger-dim: rgba(201, 79, 86, 0.15);
  --c-danger-glow: rgba(201, 79, 86, 0.4);
  --c-mana: #7d8fc9;
  --c-mana-dim: rgba(125, 143, 201, 0.15);

  /* HP / MP bar fills — themed gradients (worlds may override). */
  --grad-hp: linear-gradient(90deg, #9e3a44 0%, #c94f56 100%);
  --grad-mp: linear-gradient(90deg, #56629e 0%, #7d8fc9 100%);
  /* Data Points pool (Cyberpunk hacking) — theme overrides with its accent. */
  --grad-dp: linear-gradient(90deg, #8a4a6a 0%, #c96a94 100%);
  --c-dp-glow: rgba(201, 106, 148, 0.4);

  /* Cell tokens — neutral grayscale fallback. Worlds set their own. */
  --c-wall: #1f2230;
  --c-wall-light: #282c3a;
  --c-wall-dark: #14171f;
  --c-wall-edge: #2f3344;
  --c-floor: #0d0f15;
  --c-floor-alt: #11131a;
  --c-floor-edge: rgba(255, 255, 255, 0.025);
  --c-trail: rgba(180, 190, 210, 0.18);

  /* Wall texture — neutral slate brick. */
  --wall-texture: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='brick' width='20' height='10' patternUnits='userSpaceOnUse'%3E%3Crect width='20' height='10' fill='%231d2030'/%3E%3Crect x='0' y='0' width='9' height='4' rx='0.5' fill='%23252939'/%3E%3Crect x='11' y='0' width='9' height='4' rx='0.5' fill='%23282c3c'/%3E%3Crect x='5' y='5' width='9' height='4' rx='0.5' fill='%23232736'/%3E%3Crect x='16' y='5' width='4' height='4' rx='0.5' fill='%232a2e3e'/%3E%3Crect x='0' y='5' width='4' height='4' rx='0.5' fill='%23202434'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='40' height='40' fill='url(%23brick)'/%3E%3C/svg%3E");

  --floor-texture: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' fill='%230d0f15'/%3E%3Crect x='1' y='1' width='18' height='18' rx='1' fill='%2310131a' stroke='%23161a25' stroke-width='0.5'/%3E%3Crect x='21' y='1' width='18' height='18' rx='1' fill='%2311141a' stroke='%23161a25' stroke-width='0.5'/%3E%3Crect x='1' y='21' width='18' height='18' rx='1' fill='%2311141a' stroke='%23161a25' stroke-width='0.5'/%3E%3Crect x='21' y='21' width='18' height='18' rx='1' fill='%2310131a' stroke='%23161a25' stroke-width='0.5'/%3E%3C/svg%3E");

  /* Background abyss — desaturated slate, no specific world flavour. */
  --bg-abyss: radial-gradient(ellipse at 30% 40%, rgba(60, 70, 95, 0.18) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 60%, rgba(45, 55, 80, 0.12) 0%, transparent 45%),
              radial-gradient(ellipse at 50% 90%, rgba(80, 90, 115, 0.06) 0%, transparent 40%),
              radial-gradient(ellipse at 10% 80%, rgba(70, 80, 100, 0.05) 0%, transparent 35%),
              radial-gradient(ellipse at 90% 20%, rgba(90, 100, 125, 0.05) 0%, transparent 35%);

  /* Fog texture */
  --fog-texture: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");

  /* Typography */
  --font-display: 'Cinzel', serif;
  --font-ui: 'Inter', system-ui, sans-serif;

  /* Grid */
  --cell-size: 40px;
  --cell-gap: 2px;
  --grid-cols: 10;
  --cell-radius: 4px;

  /* Fog */
  --fog-color: rgba(6, 6, 18, 0.92);

  /* Transitions */
  --t-fast: 120ms;
  --t-normal: 250ms;
  --t-slow: 500ms;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 20px var(--c-accent-glow);

  /* Z-layers — one ladder for the whole game screen. The rule that matters:
     decorative light (veil, torch, vignette) stays UNDER everything the
     player reads or taps (popup, minimap, menu, floating controls). */
  --z-grid: 1;
  --z-veil: 35;      /* darkness veil over the maze */
  --z-torch: 40;     /* torch light cone */
  --z-vignette: 45;  /* edge vignette — decorative, never over the HUD */
  --z-popup: 50;     /* danger/interaction popup */
  --z-hud: 60;       /* minimap, pause pill, floating HUD chips */
  --z-float: 150;    /* stick, action button */
  --z-overlay: 200;  /* pause, level-up, story cards */
  --z-modal: 300;    /* auth, riddle */
  --z-gate: 500;     /* toasts, transition shroud — nothing sits above */

  /* Radii — three steps instead of seven ad-hoc ones. */
  --r-chip: 6px;
  --r-card: 10px;
  --r-panel: 14px;

  /* Accent as a FILL — --c-glow is a shadow colour; painting backgrounds
     with it put accent text on an accent wash (contrast ~zero). */
  --c-glow-fill: color-mix(in srgb, var(--c-accent) 10%, transparent);

  /* Item rarity frames — resolve to the world's own palette. */
  --c-rarity-uncommon: var(--c-heal);
  --c-rarity-rare: var(--c-gold);

  /* Type scale — minor-third-ish ladder; new UI should size from these
     instead of ad-hoc rem values. */
  --fs-1: 0.62rem;   /* micro labels, tab captions */
  --fs-2: 0.72rem;   /* secondary captions, chips */
  --fs-3: 0.82rem;   /* body-small, log entries */
  --fs-4: 0.95rem;   /* body, buttons */
  --fs-5: 1.15rem;   /* subheads */
  --fs-6: 1.45rem;   /* section titles */
  --fs-7: 2rem;      /* screen titles */
  --fs-8: 3.5rem;    /* the wordmark */
}