/* ═══════════════════════════════════════════
   DESIGN TOKENS — DUAL MODE
   ═══════════════════════════════════════════ */
:root {
  --accent: #06D6A0;
  --accent-dim: #059669;
  --accent-glow: rgba(6,214,160,0.15);
  --accent-border: rgba(6,214,160,0.25);
  --amber: #F4A261;
  --red: #E63946;
  --blue: #4895EF;
  /* Single type scale — no decorative serif */
  --font-display: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;
  --font-body: 'DM Sans', sans-serif;
  /* Radius scale */
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  /* Type scale */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   15px;
}

[data-theme="dark"] {
  /* Backgrounds — neutral near-black, correct elevation order (darkest → lightest) */
  --bg:       #0E0E10;
  --bg2:      #161618;
  --bg3:      #1C1C1E;
  /* Surfaces — Apple's elevated surface + secondary grouped fill */
  --surface:  #1C1C1E;
  --surface2: #2C2C2E;
  /* Borders */
  --border:   rgba(255,255,255,0.10);
  --border2:  rgba(255,255,255,0.18);
  /* Text — Apple's dark-mode label hierarchy, neutral grays */
  --text:     #F5F5F7;
  --text2:    #98989D;
  --text3:    #636366;
  /* Inversion */
  --invert-bg:   #F5F5F7;
  --invert-text: #0E0E10;
  /* Shadows — strong enough to create real elevation on dark surfaces */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.30);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
}

[data-theme="light"] {
  /* Backgrounds — Apple system background + grouped fills, neutral grays */
  --bg:       #F2F2F7;
  --bg2:      #FFFFFF;
  --bg3:      #E5E5EA;
  /* Surfaces */
  --surface:  #FFFFFF;
  --surface2: #F2F2F7;
  /* Borders */
  --border:   rgba(0,0,0,0.10);
  --border2:  rgba(0,0,0,0.18);
  /* Text — Apple's light-mode label hierarchy */
  --text:     #1D1D1F;
  --text2:    #6E6E73;
  --text3:    #8E8E93;
  /* Inversion */
  --invert-bg:   #1D1D1F;
  --invert-text: #F2F2F7;
  /* Shadows — subtle on light surfaces */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
}