/* ============================================
   MANZIL — Design Tokens (Driver · v2.0)
   "Quiet Premium" — matches passenger brand
   ============================================ */

:root {
  /* Colors — Primary (ORANGE = MANZIL brand) */
  --neon: #FF7500;
  --neon-dim: #EA580C;
  --neon-glow: rgba(255, 117, 0, 0.35);
  --neon-soft: rgba(255, 117, 0, 0.10);

  --black: #0B1120;
  --bg: #EDEDED;
  --elevated: #F6F6F6;
  --white: #FFFFFF;

  /* Text */
  --text-1: #0B1120;
  --text-2: #6E6E6E;
  --text-3: #A8A8A8;
  --text-inv: #FFFFFF;

  /* Semantic */
  --success: #10B981;
  --success-bg: rgba(16, 185, 129, 0.12);
  --warning: #F5A623;
  --warning-bg: rgba(245, 166, 35, 0.12);
  --danger: #EF4444;
  --danger-bg: rgba(239, 68, 68, 0.12);
  --info: #3B82F6;
  --info-bg: rgba(59, 130, 246, 0.12);

  /* Borders */
  --border: #E2E2E2;
  --border-strong: #D0D0D0;

  /* Spacing (8pt grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* Radius */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-2xl: 28px;
  --r-3xl: 32px;
  --r-full: 9999px;

  /* Shadows */
  --sh-soft: 0 2px 8px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --sh-card: 0 4px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --sh-float: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --sh-black: 0 8px 24px rgba(0,0,0,0.18);
  --sh-neon: 0 8px 24px rgba(255, 117, 0, 0.40);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-micro: 100ms;
  --dur-short: 150ms;
  --dur-std: 250ms;
  --dur-med: 300ms;
  --dur-long: 2200ms;
}

/* ---------- DARK MODE (auto) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1120;
    --elevated: #0F172A;
    --white: #1E293B;
    --text-1: #FAFAFA;
    --text-2: #A8A8A8;
    --text-3: #6E6E6E;
    --text-inv: #0B1120;
    --border: #1E293B;
    --border-strong: #334155;
    --sh-soft: 0 2px 8px rgba(0,0,0,0.3);
    --sh-card: 0 4px 16px rgba(0,0,0,0.4);
    --sh-float: 0 8px 24px rgba(0,0,0,0.5);
    --sh-inset: inset 0 1px 0 rgba(255,255,255,0.04);
  }
}

/* ---------- DARK MODE (manual toggle) ---------- */
[data-theme="dark"] {
  --bg: #0B1120;
  --elevated: #0F172A;
  --white: #1E293B;
  --black: #FAFAFA;

  --text-1: #FAFAFA;
  --text-2: #A8A8A8;
  --text-3: #6E6E6E;
  --text-inv: #0B1120;

  --border: #1E293B;
  --border-strong: #334155;

  --success-bg: rgba(16, 185, 129, 0.15);
  --warning-bg: rgba(245, 166, 35, 0.15);
  --danger-bg: rgba(239, 68, 68, 0.15);
  --info-bg: rgba(59, 130, 246, 0.15);

  --sh-soft: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-card: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --sh-float: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.5);
  --sh-black: 0 8px 24px rgba(0, 0, 0, 0.6);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}