/* ============================================================
   Quantum Whale Portal — Design Tokens
   Extracted from thequantumwhale.com
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --color-primary:        #005294;
  --color-primary-dark:   #00365d;
  --color-primary-hover:  #004080;
  --color-accent:         #1AB0D6;
  --color-accent-dark:    #0f8fb0;
  --color-sky:            #71C0FF;
  --color-light-blue:     #BAE0FF;

  /* ── Semantic Colors ── */
  --color-success:        #22c55e;
  --color-success-light:  #dcfce7;
  --color-warning:        #f59e0b;
  --color-warning-light:  #fef3c7;
  --color-danger:         #ef4444;
  --color-danger-light:   #fee2e2;
  --color-info:           #3b82f6;

  /* ── NPS Colors ── */
  --color-promoter:       #22c55e;
  --color-passive:        #f59e0b;
  --color-detractor:      #ef4444;

  /* ── Backgrounds ── */
  --bg-page:              #f0f6ff;
  --bg-surface:           #ffffff;
  --bg-subtle:            #f7faff;
  --bg-muted:             #eef4fc;
  --bg-header:            linear-gradient(135deg, #005294 0%, #1AB0D6 100%);
  --bg-hero:              linear-gradient(135deg, #005294 0%, #0a7ab5 50%, #1AB0D6 100%);
  --bg-card-dark:         linear-gradient(135deg, #005294 0%, #007ac2 100%);

  /* ── Text ── */
  --text-primary:         #1a2a4a;
  --text-secondary:       #4a6080;
  --text-muted:           #8a9ab5;
  --text-inverse:         #ffffff;
  --text-link:            #005294;
  --text-link-hover:      #1AB0D6;

  /* ── Border ── */
  --border-color:         #dce8f5;
  --border-focus:         #1AB0D6;
  --border-radius-sm:     4px;
  --border-radius:        8px;
  --border-radius-md:     12px;
  --border-radius-lg:     16px;
  --border-radius-xl:     24px;
  --border-radius-full:   9999px;

  /* ── Shadows ── */
  --shadow-xs:    0 1px 3px rgba(0,82,148,0.06);
  --shadow-sm:    0 2px 8px rgba(0,82,148,0.08);
  --shadow-md:    0 4px 24px rgba(0,82,148,0.10);
  --shadow-lg:    0 8px 40px rgba(0,82,148,0.14);
  --shadow-xl:    0 16px 64px rgba(0,82,148,0.18);
  --shadow-focus: 0 0 0 3px rgba(26,176,214,0.25);

  /* ── Spacing ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Typography ── */
  --font-family:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-size-xs:   12px;
  --font-size-sm:   13px;
  --font-size-base: 15px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;
  --font-size-3xl:  30px;
  --font-size-4xl:  38px;
  --font-size-5xl:  48px;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;
  --line-height-tight:  1.25;
  --line-height-snug:   1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed:1.65;

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index ── */
  --z-base:    1;
  --z-dropdown:10;
  --z-sticky:  100;
  --z-modal:   200;
  --z-toast:   300;

  /* ── Star Rating ── */
  --star-filled: #f5a623;
  --star-empty:  #dce8f5;
  --star-size:   28px;
}

[data-theme="dark"] {
  /* ── Brand Colors ── */
  --color-primary:        #71C0FF;
  --color-primary-hover:  #BAE0FF;
  --color-accent:         #1AB0D6;
  --color-accent-dark:    #0f8fb0;
  
  /* ── Backgrounds ── */
  --bg-page:              #0a0f1d;
  --bg-surface:           #121829;
  --bg-subtle:            #1a2035;
  --bg-muted:             #202942;
  --bg-header:            linear-gradient(135deg, #09132c 0%, #00365d 100%);
  --bg-hero:              linear-gradient(135deg, #09132c 0%, #00365d 50%, #0c5e7b 100%);
  --bg-card-dark:         linear-gradient(135deg, #002340 0%, #00365d 100%);

  /* ── Text ── */
  --text-primary:         #f1f5f9;
  --text-secondary:       #cbd5e1;
  --text-muted:           #64748b;
  --text-inverse:         #0a0f1d;
  --text-link:            #71C0FF;
  --text-link-hover:      #BAE0FF;

  /* ── Border & Stars ── */
  --border-color:         #242d45;
  --star-empty:           #242d45;

  /* ── Shadows ── */
  --shadow-xs:    0 1px 3px rgba(0,0,0,0.3);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 24px rgba(0,0,0,0.45);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.55);
  --shadow-xl:    0 16px 64px rgba(0,0,0,0.65);
  --shadow-focus: 0 0 0 3px rgba(26,176,214,0.4);

  /* ── NPS & Checkbox Override ── */
  --color-light-blue:     #1e294b;
}