/* ==========================================================================
   ONLOGIST · Design Tokens
   Light theme is the default. Dark theme is applied via [data-theme="dark"].
   Token names match the JSX mockups (TOKENS object) so designs stay 1:1.
   ========================================================================== */

:root,
[data-theme="light"] {
  /* Neutrals — slight cool tone (Stripe/Linear) */
  --bg:           #f7f8fa;
  --surface:      #ffffff;
  --surface-2:    #f3f4f7;
  --border:       #e6e8ef;
  --border-strong:#d4d8e1;
  --text:         #0f172a;
  --text-2:       #5b6478;
  --text-3:       #8a93a6;

  /* Brand + signals */
  --brand:        #3b5bdb;
  --brand-tint:   #e8edfd;
  --green:        #16a34a;
  --green-tint:   #e8f6ed;
  --amber:        #d97706;
  --amber-tint:   #fdf2e2;
  --red:          #dc2626;
  --red-tint:     #fdecec;
  --violet:       #7c3aed;
  --violet-tint:  #f0e9ff;

  /* Effects */
  --shadow-sm:    0 1px 2px rgba(15,23,42,0.03);
  --shadow-md:    0 1px 3px rgba(15,23,42,0.05), 0 4px 16px rgba(15,23,42,0.04);
  --shadow-lg:    0 10px 40px rgba(15,23,42,0.10);
  --shadow-card:  0 1px 2px rgba(15,23,42,0.03);

  /* Hero gradient (mobile driver instance card) */
  --hero-gradient: linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#1e3a8a 100%);

  /* Status bar background (driver) */
  --header-bg:    #ffffff;
  --sidebar-bg:   var(--surface-2);
}

[data-theme="dark"] {
  --bg:           #0b1220;
  --surface:      #111827;
  --surface-2:    #0f172a;
  --border:       #1e293b;
  --border-strong:#334155;
  --text:         #f1f5f9;
  --text-2:       #94a3b8;
  --text-3:       #64748b;

  --brand:        #6585ee;
  --brand-tint:   rgba(101,133,238,0.16);
  --green:        #4ade80;
  --green-tint:   rgba(74,222,128,0.16);
  --amber:        #fbbf24;
  --amber-tint:   rgba(251,191,36,0.16);
  --red:          #f87171;
  --red-tint:     rgba(248,113,113,0.16);
  --violet:       #a78bfa;
  --violet-tint:  rgba(167,139,250,0.16);

  --shadow-sm:    0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:    0 10px 40px rgba(0,0,0,0.5);
  --shadow-card:  0 1px 0 rgba(255,255,255,0.03);

  --hero-gradient: linear-gradient(135deg,#020617 0%,#0f172a 50%,#1e3a8a 100%);

  --header-bg:    var(--surface);
  --sidebar-bg:   var(--surface-2);
}

/* ── Type scale ── */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
}