/* ═══════════════════════════════════════
   DESIGN TOKENS v4 — clean minimal
═══════════════════════════════════════ */

:root {
  /* ── Onboarding (light) ── */
  --ob-bg:           #FFFFFF;
  --ob-surface:      #F7F7F8;
  --ob-border:       #E8E8E8;
  --ob-border-2:     #D4D4D4;
  --ob-text:         #111111;
  --ob-text-2:       #404040;
  --ob-muted:        #767676;
  --ob-subtle:       #ABABAB;
  --ob-divider:      #F0F0F0;

  --ob-accent:       #7C3AED;
  --ob-accent-2:     #6D28D9;
  --ob-accent-bg:    #F3EEFF;
  --ob-accent-text:  #5B21B6;

  --ob-safe:         #16A34A;
  --ob-safe-bg:      #F0FDF4;
  --ob-warn:         #A16207;
  --ob-warn-bg:      #FEFCE8;
  --ob-danger:       #DC2626;
  --ob-danger-bg:    #FFF1F1;
  --ob-info:         #1D4ED8;
  --ob-info-bg:      #EFF6FF;

  /* ── Results (dark) — results.css reads these ── */
  --color-bg:          #09090b;
  --color-surface:     #111113;
  --color-surface-2:   #1c1c1f;
  --color-surface-3:   #232326;
  --color-border:      #2a2a2d;
  --color-border-2:    #3a3a3e;
  --color-text:        #f4f4f5;
  --color-text-2:      #d4d4d8;
  --color-muted:       #71717a;
  --color-subtle:      #52525b;
  --color-accent:      #7c3aed;
  --color-accent-2:    #6d28d9;
  --color-accent-3:    #a78bfa;
  --color-accent-glow: rgba(124,58,237,0.18);
  --color-safe:        #22c55e;
  --color-safe-bg:     rgba(34,197,94,0.08);
  --color-moderate:    #60a5fa;
  --color-moderate-bg: rgba(96,165,250,0.08);
  --color-warning:     #f97316;
  --color-warning-bg:  rgba(249,115,22,0.08);
  --color-danger:      #ef4444;
  --color-danger-bg:   rgba(239,68,68,0.08);

  /* ── Typography ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', monospace;

  /* ── Motion ── */
  --t-fast:   140ms ease;
  --t-card:   320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Layout ── */
  --header-h:  56px;
  --card-px:   28px;
  --card-maxw: 480px;
  --card-radius: 18px;
}