/* ─── PubScout Design Tokens ───────────────────────────────────────────────
   All values must come from here. No hardcoded colours, spacing, or radius
   anywhere else in the codebase.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Light mode (default) ── */

  /* Backgrounds */
  --bg-page:       #F4F1EC;
  --bg:            #F0F4FA;
  --bg-card:       #FFFFFF;
  --bg-elevated:   rgba(255, 255, 255, 0.92);
  --bg-nav:        rgba(255, 255, 255, 0.97);
  --bg-code:       #F4F7FB;

  /* Text */
  --text:          #1A2740;
  --muted:         #3C5268;
  --label:         #4E6A85;
  --placeholder:   #8BAAC8;

  /* Borders */
  --border-subtle: rgba(26, 39, 64, 0.08);
  --border:        rgba(26, 39, 64, 0.13);
  --border-strong: rgba(26, 39, 64, 0.22);

  /* Glass */
  --glass:         rgba(255, 255, 255, 0.92);
  --glass-blur:    blur(20px) saturate(180%);

  /* Brand accent colours */
  --mint:          #009E7A;
  --mint-2:        #00C896;
  --mint-bg:       rgba(0, 158, 122, 0.08);
  --mint-bg-hover: rgba(0, 158, 122, 0.14);
  --blue:          #2C7DE0;
  --blue-2:        #4A94F0;
  --blue-bg:       rgba(44, 125, 224, 0.08);
  --amber:         #C47A00;
  --amber-2:       #E08C00;
  --amber-bg:      rgba(196, 122, 0, 0.08);
  --red:           #C73B3B;
  --red-bg:        rgba(199, 59, 59, 0.08);

  /* Tier colours */
  --tier-starter:  #94A3B8;
  --tier-pro:      var(--mint);
  --tier-elite:    var(--blue);
  --tier-auth:     var(--amber);

  /* Shadows */
  --sh-sm:  0 1px 2px rgba(26, 39, 64, 0.06), 0 4px 12px rgba(26, 39, 64, 0.06);
  --sh-md:  0 1px 3px rgba(26, 39, 64, 0.08), 0 8px 20px rgba(26, 39, 64, 0.08);
  --sh-lg:  0 0 0 1px rgba(26, 39, 64, 0.06), 0 4px 6px rgba(26, 39, 64, 0.04),
            0 12px 24px rgba(26, 39, 64, 0.07), 0 32px 64px rgba(26, 39, 64, 0.05);

  /* Highlight (inset top border shimmer) */
  --hi:     rgba(255, 255, 255, 0.6);
}

:root[data-theme="dark"] {
  /* ── Dark mode ── */

  /* Backgrounds */
  --bg:            #070D1A;
  --bg-card:       #0E1A2E;
  --bg-elevated:   #162d4a;
  --bg-nav:        rgba(7, 13, 26, 0.85);
  --bg-code:       #0A1220;
  --bg-hero:       #1E1D22;

  /* Text */
  --text:          #EAF0FC;
  --muted:         #8BAAC8;
  --label:         #6A8BA8;
  --placeholder:   #4A6A88;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.10);
  --border:        rgba(255, 255, 255, 0.15);
  --border-strong: rgba(255, 255, 255, 0.25);

  /* Glass */
  --glass:         rgba(14, 26, 46, 0.92);
  --glass-blur:    blur(16px);

  /* Brand accent colours */
  --mint:          #2ED8A8;
  --mint-2:        #52E4B9;
  --mint-bg:       rgba(46, 216, 168, 0.10);
  --mint-bg-hover: rgba(46, 216, 168, 0.16);
  --blue:          #3B8EF0;
  --blue-2:        #5FA8FF;
  --blue-bg:       rgba(59, 142, 240, 0.12);
  --amber:         #F0A030;
  --amber-2:       #FFB84A;
  --amber-bg:      rgba(240, 160, 48, 0.10);
  --red:           #E05252;
  --red-bg:        rgba(224, 82, 82, 0.10);

  /* Tier colours */
  --tier-starter:  #94A3B8;
  --tier-pro:      var(--mint);
  --tier-elite:    var(--blue);
  --tier-auth:     var(--amber);

  /* Shadows */
  --sh-sm:  0 1px 3px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.25);
  --sh-md:  0 1px 4px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.30);
  --sh-lg:  0 0 0 1px rgba(255, 255, 255, 0.04), 0 4px 6px rgba(0, 0, 0, 0.20),
            0 12px 24px rgba(0, 0, 0, 0.30), 0 32px 64px rgba(0, 0, 0, 0.25);

  /* Highlight */
  --hi:     rgba(255, 255, 255, 0.04);
}

/* ── Shared (mode-independent) tokens ── */
:root {
  /* Typography */
  --fd:    'Bricolage Grotesque', 'Inter', sans-serif;
  --fb:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale */
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-44: 44px;

  /* Spacing scale (4px grid) */
  --sp-4:  4px;
  --sp-6:  6px;
  --sp-8:  8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-80: 80px;

  /* Radius scale */
  --r-4:  4px;   /* bars */
  --r-6:  6px;   /* chips */
  --r-8:  8px;   /* buttons */
  --r-12: 12px;  /* cards */
  --r-16: 16px;  /* panels */
  --r-20: 20px;  /* pills */
  --r-full: 9999px;

  /* Motion */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  150ms;
  --dur-base:  200ms;
  --dur-slow:  350ms;

  /* Layout */
  --max-w:     1280px;
  --gutter:    clamp(16px, 4vw, 48px);
}