/* ============================================================
   Scouty brand tokens — ONE palette for every page (KD 2026-10-14)
   ------------------------------------------------------------
   Source of truth: index.html <style> :root / [data-theme="light"].
   This file mirrors those values so /<handle>, /type*, /pricing, /privacy,
   /terms, /refund, /support and career.heyscouty.com render as one product.

   Theme rule (same on every page):
     · <html data-theme="light"|"dark"> is set before first paint by the
       inline bootstrap in each <head> (localStorage 'scouty_theme' →
       cookie 'scouty_theme' on .heyscouty.com → prefers-color-scheme).
     · Without JS: light by default, dark when the OS prefers dark.

   Naming: index.html names (--bg --card --card2 --text --sub --dim …) are the
   canon. Older pages used other names (--bg-deep --sapphire --surface --text-2
   --border-2 …); those are kept as aliases below so no layout CSS had to move.
   ============================================================ */

:root {
  color-scheme: light;

  /* surfaces */
  --bg: #F5F6FA;
  --card: #FFFFFF;
  --card2: #EEF1F6;
  --surface: var(--card);
  --surface-2: var(--card2);
  --surface-sunken: #E9EDF4;          /* code / prompt boxes */
  --border: rgba(0,0,0,0.12);
  --border-strong: rgba(0,0,0,0.22);
  --overlay: rgba(15,23,42,0.45);     /* modal / sheet backdrop */
  --topbar-bg: rgba(245,246,250,0.78);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-modal: 0 16px 40px rgba(0,0,0,0.18);

  /* text */
  --text: #0B0F1A;
  --sub: #1F2937;
  --dim: #4B5563;
  --text-2: #374151;
  --text-3: #6B7280;
  --text-4: #9CA3AF;

  /* brand — Sapphire */
  --brand: #2563EB;
  --brand-hover: #1D4ED8;
  --brand-soft: #60A5FA;              /* decorative only (never body text on light) */
  --brand-text: #2563EB;              /* brand-coloured TEXT, readable on this theme */
  --brand-text-hover: #1D4ED8;
  --brand-bg: rgba(37,99,235,0.10);
  --glow-a: rgba(37,99,235,0.10);     /* /type ambient gradients */
  --glow-b: rgba(96,165,250,0.08);
  --particle: rgba(37,99,235,0.35);

  /* semantic */
  --gold: #B8941F;                    /* premium / reward moments only */
  --premium-gold: var(--gold);
  --gold-soft: rgba(212,175,55,0.18);
  --premium-gold-soft: var(--gold-soft);
  --green: #10B981;
  --success: var(--green);
  --success-bg: rgba(16,185,129,0.10);
  --warning: #F59E0B;
  --red: #EF4444;
  --danger: var(--red);
  --error: #DC2626;
  --purple: #8B5CF6;
  --info: var(--brand);

  /* status pills */
  --ok-text: #047857;       --ok-bg: rgba(16,185,129,0.12);   --ok-border: rgba(16,185,129,0.30);
  --info-text: #1D4ED8;     --info-bg: rgba(37,99,235,0.10);  --info-border: rgba(37,99,235,0.28);
  --warn-text: #92400E;     --warn-bg: rgba(212,175,55,0.18); --warn-border: rgba(180,140,30,0.38);
  --risk-text: #B91C1C;     --risk-bg: rgba(239,68,68,0.10);  --risk-border: rgba(239,68,68,0.28);
  --neutral-text: #334155;  --neutral-bg: rgba(15,23,42,0.06); --neutral-border: rgba(15,23,42,0.14);

  /* typography */
  --font: 'Inter', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'DM Mono', ui-monospace, monospace;
  --font-serif: 'Fraunces', Georgia, serif;   /* /type + career accents only */

  /* radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- aliases used by older pages ---- */
  --bg-deep: var(--bg);
  --sapphire: var(--brand);
  --sapphire-hover: var(--brand-hover);
  --sapphire-soft: var(--brand-text);
  --border-2: var(--border-strong);
  --border2: var(--border-strong);
  --line: var(--border);
  --font-sans: var(--font);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B0F1A;
    --card: #131A2B;
    --card2: #1A2238;
    --surface-sunken: #07091A;
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.16);
    --overlay: rgba(5,7,12,0.85);
    --topbar-bg: rgba(11,15,26,0.72);
    --shadow-card: none;
    --shadow-modal: 0 24px 60px rgba(0,0,0,0.5);
    --text: #F8FAFC;
    --sub: #CBD5E1;
    --dim: #94A3B8;
    --text-2: var(--sub);
    --text-3: var(--dim);
    --text-4: #64748B;
    --brand-text: #60A5FA;
    --brand-text-hover: #93C5FD;
    --glow-a: rgba(37,99,235,0.18);
    --glow-b: rgba(96,165,250,0.10);
    --particle: rgba(96,165,250,0.5);
    --gold: #D4AF37;
    --gold-soft: rgba(212,175,55,0.15);
    --error: #F87171;
    --ok-text: #6EE7B7;       --ok-bg: rgba(16,185,129,0.16);   --ok-border: rgba(16,185,129,0.30);
    --info-text: #BFDBFE;     --info-bg: rgba(37,99,235,0.14);  --info-border: rgba(96,165,250,0.35);
    --warn-text: #E9CF7A;     --warn-bg: rgba(212,175,55,0.16); --warn-border: rgba(212,175,55,0.35);
    --risk-text: #FCA5A5;     --risk-bg: rgba(239,68,68,0.14);  --risk-border: rgba(239,68,68,0.30);
    --neutral-text: #CBD5E1;  --neutral-bg: rgba(255,255,255,0.06); --neutral-border: rgba(255,255,255,0.14);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0F1A;
  --card: #131A2B;
  --card2: #1A2238;
  --surface-sunken: #07091A;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --overlay: rgba(5,7,12,0.85);
  --topbar-bg: rgba(11,15,26,0.72);
  --shadow-card: none;
  --shadow-modal: 0 24px 60px rgba(0,0,0,0.5);
  --text: #F8FAFC;
  --sub: #CBD5E1;
  --dim: #94A3B8;
  --text-2: var(--sub);
  --text-3: var(--dim);
  --text-4: #64748B;
  --brand-text: #60A5FA;
  --brand-text-hover: #93C5FD;
  --glow-a: rgba(37,99,235,0.18);
  --glow-b: rgba(96,165,250,0.10);
  --particle: rgba(96,165,250,0.5);
  --gold: #D4AF37;
  --gold-soft: rgba(212,175,55,0.15);
  --error: #F87171;
  --ok-text: #6EE7B7;       --ok-bg: rgba(16,185,129,0.16);   --ok-border: rgba(16,185,129,0.30);
  --info-text: #BFDBFE;     --info-bg: rgba(37,99,235,0.14);  --info-border: rgba(96,165,250,0.35);
  --warn-text: #E9CF7A;     --warn-bg: rgba(212,175,55,0.16); --warn-border: rgba(212,175,55,0.35);
  --risk-text: #FCA5A5;     --risk-bg: rgba(239,68,68,0.14);  --risk-border: rgba(239,68,68,0.30);
  --neutral-text: #CBD5E1;  --neutral-bg: rgba(255,255,255,0.06); --neutral-border: rgba(255,255,255,0.14);
}

/* Base — every page paints the same canvas. */
html { background: var(--bg); }
body { background: var(--bg); color: var(--text); font-family: var(--font); }