/* ═══════════════════════════════════════════
   DESIGN TOKENS — DUAL MODE
   Brand: DM Sans + Apple systemIndigo, dark-first
   Matches the mobile app (mobile/lib/tokens.ts): the brand colour lives OUTSIDE
   the red/green band so green can only ever mean "up". The old teal accent was
   the same hue as --green — the exact collision the app migrated away from.
   ═══════════════════════════════════════════ */
:root {
  /* Brand accent — Apple systemIndigo (dark-mode values as the pre-theme default).
     NOTE the on-accent flip: dark mode uses a LIGHT indigo, so text on it must be
     black; light mode uses the deeper indigo and needs white. Hardcoding either
     ships an unreadable button in the other mode. */
  --accent: #6D7CFF;
  --accent-dim: #5A69F0;
  --on-accent: #000;
  --accent-glow: rgba(109,124,255,0.10);
  --accent-border: rgba(109,124,255,0.22);
  /* Semantic colors */
  --red:   #ef4444;
  --amber: #f59e0b;
  --blue:  #4895EF;
  --green: #2DD4BF;
  /* Typography — DM Sans + DM Mono */
  --font-display: 'DM Sans', ui-sans-serif, system-ui;
  --font-body:    'DM Sans', ui-sans-serif, system-ui;
  --font-mono:    'DM Mono', 'Courier New', monospace;
  /* Type scale */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   15px;
  /* Radius scale */
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

[data-theme="light"] {
  /* Brand — deeper indigo for light surfaces (5.1:1 on white), white text on it */
  --accent: #6155F5;
  --accent-dim: #5246E0;
  --on-accent: #fff;
  --accent-glow: rgba(97,85,245,0.08);
  --accent-border: rgba(97,85,245,0.20);
  /* Backgrounds */
  --bg:       #f5f5f7;
  --bg2:      #ffffff;
  --bg3:      #f0f0f5;
  /* Surfaces */
  --surface:  #ffffff;
  --surface2: #f5f5f7;
  /* Borders */
  --border:   rgba(0,0,0,0.08);
  --border2:  rgba(0,0,0,0.14);
  /* Text */
  --text:     #1d1d1f;
  --text2:    #3d3d3f;
  --text3:    #6e6e73;
  --text4:    #a1a1a6;
  /* Inversion */
  --invert-bg:   #1d1d1f;
  --invert-text: #f5f5f7;
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.05);
}

[data-theme="dark"] {
  /* Brand — light indigo for dark surfaces (4.8:1 on card), black text on it */
  --accent: #6D7CFF;
  --accent-dim: #5A69F0;
  --on-accent: #000;
  --accent-glow: rgba(109,124,255,0.10);
  --accent-border: rgba(109,124,255,0.22);
  /* Near-black Apple-inspired backgrounds */
  --bg:       #0e0e10;
  --bg2:      #141418;
  --bg3:      #1a1a1e;
  /* Surfaces */
  --surface:  #141418;
  --surface2: #1e1e26;
  /* Borders */
  --border:   rgba(255,255,255,0.07);
  --border2:  rgba(255,255,255,0.12);
  /* Text */
  --text:     #f0f0f0;
  --text2:    #9090a0;
  --text3:    #606070;
  --text4:    #404050;
  /* Inversion */
  --invert-bg:   #f0f0f0;
  --invert-text: #0e0e10;
  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.35);
}