/* ==========================================================================
   WarZone Conquer design tokens.
   The single source of truth for colour, type, space, radius, depth and
   motion. Every other stylesheet reads these variables and never a raw value.

   The palette is sampled from the key art (images/wz/wallpaper-*.webp):
   storm-slate neutrals from the sea and rocks, crimson from the heroine's
   blade, ice from the warrior's lightning axe.

   Tier 1 (primitive) names a value.  Tier 2 (semantic) names an intent.
   Components consume tier 2 only, so a re-theme is a tier-2 edit.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---------- Tier 1: primitives ---------- */

  /* Storm: cool slate with a trace of the mauve sky */
  --storm-1000: #08080b;
  --storm-950: #0d0d12;
  --storm-900: #13131a;
  --storm-850: #191921;
  --storm-800: #201f29;
  --storm-700: #2b2a36;
  --storm-600: #3b3a49;
  --storm-500: #545263;
  --storm-400: #7b7889;

  /* Mist: text neutrals */
  --mist-500: #9d96a3;
  --mist-400: #a9a2ae;
  --mist-300: #c8c2cc;
  --mist-100: #ece8ec;
  --mist-50: #f7f5f6;
  --white: #ffffff;

  /* Crimson: the blade. The primary action colour */
  --crimson-300: #ff8a80;
  --crimson-400: #f2564f;
  --crimson-500: #d93a3f;
  --crimson-600: #c0303a;
  --crimson-700: #a8252d;
  --crimson-900: #4a1418;
  --crimson-950: #2a0d10;

  /* Ice: the lightning. The accent for links, focus and highlights */
  --ice-200: #d6e4ff;
  --ice-300: #a9c3ff;
  --ice-400: #7fa6f5;
  --ice-600: #3f5f9e;
  --ice-900: #17213a;

  /* Status and rank hues, used for meaning only */
  --jade-400: #6fcf97;
  --jade-600: #2f7a52;
  --jade-950: #10241a;
  --rank-gold: #f0cc78;
  --rank-steel: #d4d9de;
  --rank-bronze: #d9925a;

  /* ---------- Tier 2: semantic ---------- */

  --surface-page: var(--storm-950);
  --surface-sunken: var(--storm-1000);
  /* Panels are slightly translucent so the key art breathes through */
  --surface-base: rgb(19 19 26 / 0.86);
  --surface-raised: rgb(25 25 33 / 0.92);
  --surface-overlay: var(--storm-800);
  --surface-hover: var(--storm-700);
  --surface-scrim: rgb(13 13 18 / 0.72);
  --surface-glass: rgb(13 13 18 / 0.8);
  --surface-band: rgb(8 8 11 / 0.7);

  /* The fixed key-art layer behind every page */
  /* Light enough that the art reads in the gutters and between panels; panels
     carry their own surface, and text set straight on the art wears --text-glow */
  --wall-scrim: linear-gradient(180deg, rgb(13 13 18 / 0.5) 0%, rgb(13 13 18 / 0.6) 50%, rgb(13 13 18 / 0.72) 100%);
  --wall-vignette: radial-gradient(120% 90% at 50% 40%, rgb(13 13 18 / 0) 55%, rgb(8 8 11 / 0.45) 100%);
  /* Phones have no gutters, so every line of text sits on the figures: a
     firmer scrim there keeps small labels at AA over the brightest art */
  --wall-scrim-portrait: linear-gradient(180deg, rgb(13 13 18 / 0.7) 0%, rgb(13 13 18 / 0.76) 50%, rgb(13 13 18 / 0.84) 100%);
  /* Shade behind the transparent header where it floats over the hero art */
  --header-shade: linear-gradient(180deg, rgb(13 13 18 / 0.82) 0%, rgb(13 13 18 / 0.6) 65%, rgb(13 13 18 / 0) 100%);
  /* The home hero shows the art at full strength, dark only where text sits */
  --hero-scrim-bottom: linear-gradient(0deg, var(--storm-950) 0%, rgb(13 13 18 / 0.86) 22%, rgb(13 13 18 / 0) 62%);
  --hero-scrim-side: linear-gradient(90deg, rgb(13 13 18 / 0.78) 0%, rgb(13 13 18 / 0.35) 45%, rgb(13 13 18 / 0) 70%);
  /* Inner-page band: brighter than the wall at the top, ending at about the
     wall's own darkness so there is no bright-dark-bright seam below it */
  --page-hero-scrim: linear-gradient(180deg, rgb(13 13 18 / 0.5) 0%, rgb(13 13 18 / 0.84) 100%);
  /* Wider screens keep the copy on the side scrim, so the banner figure can show */
  --page-hero-scrim-wide: linear-gradient(180deg, rgb(13 13 18 / 0.15) 0%, rgb(13 13 18 / 0.35) 60%, rgb(13 13 18 / 0.75) 100%);

  --text-primary: var(--mist-100);
  --text-secondary: var(--mist-300);
  --text-muted: var(--mist-400);
  --text-subtle: var(--mist-500);
  --text-on-accent: var(--white);
  --text-on-destructive: var(--white);
  --text-accent: var(--ice-300);
  --text-heading: var(--mist-50);
  --text-glow: 0 2px 18px rgb(8 8 11 / 0.9), 0 1px 2px rgb(8 8 11 / 0.9);

  --border-subtle: rgb(236 232 236 / 0.09);
  --border-default: rgb(236 232 236 / 0.16);
  --border-strong: rgb(236 232 236 / 0.28);
  --border-accent: var(--ice-400);
  /* Form controls need 3:1 against every surface (WCAG 1.4.11): 3.79 at worst */
  --border-control: var(--storm-400);

  /* White on crimson-600 measures 5.64, on the hover crimson-500 4.54 */
  --action-primary: var(--crimson-600);
  --action-primary-hover: var(--crimson-500);
  --action-primary-active: var(--crimson-700);
  --action-primary-subtle: var(--crimson-950);
  --action-secondary-border: var(--mist-400);
  --action-secondary-hover: rgb(236 232 236 / 0.08);
  --action-destructive: var(--crimson-700);
  --action-destructive-hover: var(--crimson-600);
  --action-destructive-active: var(--crimson-900);
  --action-disabled-bg: var(--storm-700);
  --action-disabled-text: var(--mist-500);

  --status-danger-text: var(--crimson-300);
  --status-danger-surface: var(--crimson-950);
  --status-danger-border: var(--crimson-600);
  --status-success-text: var(--jade-400);
  --status-success-surface: var(--jade-950);
  --status-success-border: var(--jade-600);
  --status-info-text: var(--ice-200);
  --status-info-surface: var(--ice-900);
  --status-info-border: var(--ice-600);

  --rank-1: var(--rank-gold);
  --rank-2: var(--rank-steel);
  --rank-3: var(--rank-bronze);

  --focus-ring: var(--ice-200);

  /* ---------- Typography ---------- */

  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --font-label: 'Barlow Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;
  --font-glyph: 'WZClassGlyphs';

  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
  --text-3xl: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  --text-display: clamp(2.875rem, 1.2rem + 6.4vw, 6.75rem);

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.6;

  --tracking-display: 0.02em;
  --tracking-label: 0.16em;
  --tracking-wide: 0.08em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  --measure-prose: 65ch;
  --measure-display: 18ch;
  --measure-lead: 46ch;

  /* ---------- Space: a 4px rhythm ---------- */

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --space-section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --space-gutter: clamp(1rem, 0.5rem + 3vw, 2.5rem);

  /* ---------- Sizing ---------- */

  --container-max: 75rem;
  --container-narrow: 46rem;
  --container-form: 30rem;
  --header-height: 4.25rem;
  --control-height: 3rem;
  --control-height-lg: 3.5rem;
  --control-height-sm: 2.5rem;
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --glyph-md: 2.5rem;
  --glyph-lg: 5rem;
  --hairline: 1px;
  --focus-width: 2px;
  --focus-offset: 3px;

  /* ---------- Radius ---------- */

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---------- Depth ---------- */

  --shadow-raised: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 20px 44px -24px rgb(0 0 0 / 0.9);
  --shadow-overlay: 0 24px 60px -20px rgb(0 0 0 / 0.85);
  --glow-accent: 0 0 0 1px rgb(255 138 128 / 0.35), 0 10px 34px -8px rgb(217 58 63 / 0.7);
  --glow-ice: 0 0 0 1px rgb(169 195 255 / 0.3), 0 8px 30px -10px rgb(127 166 245 / 0.55);
  /* The frame edge: lightning ice at one corner, blade crimson at the other */
  --frame-edge: linear-gradient(135deg, rgb(169 195 255 / 0.7), rgb(236 232 236 / 0.08) 35%, rgb(236 232 236 / 0.08) 65%, rgb(217 58 63 / 0.75));
  --blur-glass: 14px;

  /* ---------- Motion ---------- */

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 420ms;
  --duration-reveal: 700ms;
  --duration-spin: 700ms;
  --duration-spin-calm: 1.4s;
  --duration-instant: 1ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Layers ---------- */

  --z-wall: -1;
  --z-base: 1;
  --z-raised: 10;
  --z-header: 50;
  --z-overlay: 80;
  --z-toast: 90;
}