/* ─────────────────────────────────────────────────────────────────────
   WoW Toolbox · design tokens + base
   System: Frost-Etched — the app's own chrome, worn by the site.
   Blue-slate ground under a cyan-and-indigo corner glow, slate surfaces
   at alpha, cyan as the only primary accent, mono uppercase micro-labels
   for everything the system says. Source: the editor's
   docs/ui-style-guide.md and src/styles/colors.css.
   Loaded before every page stylesheet.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* ── Palette — Tailwind slate + the app's accent contract ───────── */
  --color-abyss: #04131c;        /* app gradient top — deepest ground */
  --color-deep-slate: #181f2f;   /* app background */
  --color-slate-950: #020617;
  --color-slate-900: #0f172a;
  --color-slate-800: #1e293b;
  --color-slate-700: #334155;
  --color-slate-600: #475569;
  --color-slate-500: #64748b;
  --color-slate-400: #94a3b8;
  --color-slate-300: #cbd5e1;
  --color-slate-100: #f1f5f9;
  --color-cyan: #22d3ee;         /* primary — active, focused, hovered */
  --color-cyan-bright: #67e8f9;  /* accent text on cyan washes */
  --color-sky: #38bdf8;          /* atmosphere glow, secondary cool */
  --color-indigo: #6366f1;       /* atmosphere glow only */
  --color-violet: #a78bfa;       /* bulk / derived — syntax keys */
  --color-amber: #fbbf24;        /* warning — syntax values */
  --color-emerald: #34d399;      /* success, completed, validated */
  --color-rose: #fb7185;         /* error and destructive only */

  /* ── Semantic roles ──────────────────────────────────────────────── */
  --bg: var(--color-deep-slate);
  --surface-1: rgba(15, 23, 42, 0.55);   /* cards, panels — slate-900 at alpha */
  --surface-2: rgba(30, 41, 59, 0.6);    /* nested / elevated — slate-800 at alpha */
  --line: rgba(51, 65, 85, 0.6);         /* the only hairline — slate-700 at alpha */

  --text-hi: var(--color-slate-100);     /* headlines, display copy */
  --text: var(--color-slate-300);        /* body, nav */
  --text-2: var(--color-slate-400);      /* secondary, links at rest */
  /* Muted is slate-400 at alpha — the app's textMuted idiom. Solid
     slate-500 reads 3.5:1 on this ground and fails AA for captions. */
  --text-mut: rgba(148, 163, 184, 0.85);

  --accent: var(--color-cyan);           /* active / selected / primary rail */
  --accent-hi: var(--color-cyan-bright); /* accent text on washed fills */
  --action: rgba(34, 211, 238, 0.12);    /* primary button wash */
  --action-hi: rgba(34, 211, 238, 0.22); /* its hover step — same hue, more alpha */
  --action-line: rgba(34, 211, 238, 0.4);
  --ok: var(--color-emerald);            /* success readouts */
  --diagnostic: var(--color-rose);       /* errors, broken rows */

  --syntax-key: var(--color-violet);     /* keys / keywords in code mockups */
  --syntax-val: var(--color-amber);      /* values / strings in code mockups */

  /* ── Type ────────────────────────────────────────────────────────── */
  --font-sans: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'Fira Code', 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --text-caption: 10px;
  --text-label: 11px;
  --text-chrome: 12px;
  --text-body: 14px;
  --text-lede: 16px;
  --text-subheading: 20px;
  --text-heading-sm: 25px;
  --text-heading: 36px;
  --text-display: 65px;

  --track-caption: 0.18em;
  --track-label: 0.14em;
  --track-chrome: 0.1em;
  --track-display: -0.02em;

  /* ── Shape ───────────────────────────────────────────────────────── */
  --radius: 6px;        /* controls, chips, badges */
  --radius-lg: 10px;    /* cards, panels, terminal frames */
  --ring-accent: inset 0 0 0 1px rgba(34, 211, 238, 0.35);
  --ring-neutral: inset 0 0 0 1px rgba(148, 163, 184, 0.25);

  /* ── Layout ──────────────────────────────────────────────────────── */
  --maxw: 1200px;
  --measure: 66ch;
  --gap-section: 80px;
  --pad-card: 20px;
  --pad-gutter: 24px;
  --gap-element: 12px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

/* Frost atmosphere: the app's canonical backdrop — abyss-to-slate ground
   with a cyan glow top-left and an indigo glow bottom-right. */
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle 640px at 80px 80px, rgba(56, 189, 248, 0.14), transparent 70%),
    radial-gradient(circle 720px at calc(100% - 90px) calc(100% - 90px), rgba(99, 102, 241, 0.12), transparent 70%),
    linear-gradient(180deg, var(--color-abyss) 0%, var(--color-deep-slate) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-lede);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* The 48px grid, at whisper opacity — same as the app's <FrostAtmosphere />. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: -1;
}

/* Mono is system chrome, not code — the ligature grid stays rigid. */
code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-feature-settings: 'calt' 0;
  font-variant-ligatures: none;
}

/* Titles are semibold slate-100 — hierarchy from weight and size, like
   the app. Strong carries medium weight in running copy. */
h1, h2, h3, h4, h5, h6 { font-weight: 600; }
strong, b { font-weight: 500; color: var(--text-hi); }

::selection { background: rgba(34, 211, 238, 0.28); color: var(--text-hi); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

img { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}