/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — SOLOS design system
   Extracted from Prototype/ decks. Shared by Book, Drive, Admin.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --brand-golden: #FFC857;
  --brand-orange: #E9724C;
  --brand-red:    #C5283D;
  --brand-wine:   #481D24;

  --golden-300: #FFD56A;
  --golden-400: #FFC857;
  --orange-400: #E9724C;
  --red-400:    #C5283D;
  --wine-400:   #481D24;
  --wine-500:   #38161C;

  --gray-0:    #FFFFFF;
  --gray-50:   #FAF8F7;
  --gray-100:  #F2EEEC;
  --gray-200:  #E5DFDC;
  --gray-300:  #CCC4C0;
  --gray-400:  #A39994;
  --gray-500:  #7A716C;
  --gray-600:  #5C534F;
  --gray-700:  #3F3835;
  --gray-800:  #2A2522;
  --gray-900:  #1A1614;
  --gray-950:  #0F0C0B;

  --success-400: #10B981;
  --success-500: #059669;
  --warning-400: #FFC857;
  --danger-400:  #C5283D;
  --info-400:    #3B82F6;

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', monospace;

  --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;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
  --radius-full: 9999px;

  --touch-min: 44px; --touch-comfort: 56px; --touch-critical: 72px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

:root[data-theme="dark"] {
  --bg-canvas:   var(--gray-950);
  --bg-surface:  var(--gray-900);
  --bg-elevated: var(--gray-800);
  --bg-sunken:   #0a0807;

  --border-subtle:  var(--gray-800);
  --border-default: var(--gray-700);
  --border-strong:  var(--gray-600);

  --text-primary:   var(--gray-50);
  --text-secondary: var(--gray-300);
  --text-tertiary:  var(--gray-400);
  --text-disabled:  var(--gray-600);

  --accent-primary: var(--golden-400);
  --accent-emphasis: var(--orange-400);

  --pass-color: #34D399;
  --pass-bg: rgba(16, 185, 129, 0.15);
  --pass-border: rgba(16, 185, 129, 0.4);
  --warn-color: var(--golden-300);
  --warn-bg: rgba(255, 200, 87, 0.15);
  --fail-color: #F08699;
  --fail-bg: rgba(197, 40, 61, 0.18);
  --info-color: #60A5FA;
  --info-bg: rgba(59, 130, 246, 0.15);
  --warn-border: rgba(255, 200, 87, 0.35);
  --fail-border: rgba(197, 40, 61, 0.45);
  --info-border: rgba(59, 130, 246, 0.35);
  --accent-bg: rgba(233, 114, 76, 0.10);
  --accent-border: rgba(233, 114, 76, 0.35);
}

:root[data-theme="light"] {
  --bg-canvas: var(--gray-50);
  --bg-surface: var(--gray-0);
  --bg-elevated: var(--gray-0);
  --bg-sunken: var(--gray-100);

  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);

  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-disabled: var(--gray-400);

  --accent-primary: var(--wine-400);
  --accent-emphasis: var(--orange-400);

  --pass-color: var(--success-500);
  --pass-bg: #D1FAE5;
  --pass-border: rgba(16, 185, 129, 0.4);
  --warn-color: #946D1D;
  --warn-bg: #FFF8E6;
  --fail-color: var(--danger-400);
  --fail-bg: #FAE3E7;
  --info-color: #2563EB;
  --info-bg: #DBEAFE;
  --warn-border: rgba(255, 200, 87, 0.6);
  --fail-border: rgba(197, 40, 61, 0.4);
  --info-border: rgba(37, 99, 235, 0.4);
  --accent-bg: rgba(233, 114, 76, 0.08);
  --accent-border: rgba(233, 114, 76, 0.4);
}