/*
 * StarKraftika — Shared CSS Custom Properties
 * Single source of truth for all design tokens.
 * Linked from every page; inline <style> blocks reference these vars.
 */
:root {
  /* ── Core palette ───────────────────────────────────── */
  --bg:      #050810;
  --panel:   #0b1220;
  --border:  #1a2a4a;

  --accent:  #00d4ff;   /* cyan — primary interactive */
  --accent2: #ff6b00;   /* orange — secondary / highlights */

  --text:    #e8eaf0;   /* body copy */
  --muted:   #7a95b5;   /* secondary text — #607590 failed WCAG AA (3.7:1); #7a95b5 passes at ~6.5:1 */
  --muted2:  #6a80a0;   /* tertiary / captions — passes WCAG AA at ~5.2:1 */

  /* ── Race colours ───────────────────────────────────── */
  --zerg:    #8b2fc9;
  --terran:  #1a8cff;
  --protoss: #ffd700;

  /* ── Blog tag backgrounds ───────────────────────────── */
  --tag-recap:    rgba(0,212,255,0.12);
  --tag-strategy: rgba(255,107,0,0.12);

  /* ── Spacing scale ──────────────────────────────────── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* ── Type scale ─────────────────────────────────────── */
  --fs-xs:   0.72rem;
  --fs-sm:   0.75rem;
  --fs-base: 0.875rem;
  --fs-md:   1rem;
  --fs-lg:   1.1rem;
  --fs-xl:   1.4rem;
  --fs-2xl:  2rem;
}