/* ============================================================
   DealerCRM 4 — Design Tokens
   Single source of truth. Imported first.
   Convention: --ds-{category}-{role}
   ============================================================ */

:root {
  /* ============ NEUTRALS — Cool Slate (oklch) ============ */
  --ds-n-0:    #ffffff;
  --ds-n-50:   oklch(0.985 0.003 250);
  --ds-n-100:  oklch(0.970 0.004 250);
  --ds-n-150:  oklch(0.955 0.005 250);
  --ds-n-200:  oklch(0.928 0.006 250);
  --ds-n-300:  oklch(0.880 0.008 250);
  --ds-n-400:  oklch(0.760 0.012 250);
  --ds-n-500:  oklch(0.620 0.014 250);
  --ds-n-600:  oklch(0.480 0.014 250);
  --ds-n-700:  oklch(0.370 0.013 250);
  --ds-n-800:  oklch(0.265 0.011 250);
  --ds-n-900:  oklch(0.180 0.010 250);
  --ds-n-950:  oklch(0.130 0.008 250);

  /* ============ SURFACES (semantic) ============ */
  --ds-bg:           var(--ds-n-0);
  --ds-bg-muted:     var(--ds-n-50);
  --ds-surface:      var(--ds-n-0);
  --ds-surface-2:    var(--ds-n-50);
  --ds-surface-3:    var(--ds-n-100);
  --ds-surface-dark: var(--ds-n-900);

  /* ============ BORDERS ============ */
  --ds-border:        var(--ds-n-200);
  --ds-border-strong: var(--ds-n-300);
  --ds-border-dark:   oklch(0.30 0.012 250);

  /* ============ TEXT (semantic) ============ */
  --ds-ink:        var(--ds-n-900);
  --ds-ink-2:      var(--ds-n-800);
  --ds-muted:      var(--ds-n-500);
  --ds-muted-2:    var(--ds-n-400);
  --ds-ink-on-dark:        #ffffff;
  --ds-ink-2-on-dark:      oklch(0.78 0.012 250);
  --ds-muted-on-dark:      oklch(0.65 0.012 250);
  --ds-muted-2-on-dark:    oklch(0.55 0.012 250);

  /* ============ ACCENT — Cyan (primary brand) ============ */
  --ds-a:        oklch(0.50 0.20 225);
  --ds-a-hover:  oklch(0.43 0.21 225);
  --ds-a-soft:   oklch(0.50 0.20 225 / 0.08);
  --ds-a-ink:    oklch(0.36 0.16 225);
  --ds-a-bright: #00c2f3;
  --ds-a-glow:   oklch(0.85 0.20 225);

  /* AI uses same accent — single brand color */
  --ds-ai:       var(--ds-a);
  --ds-ai-soft:  var(--ds-a-soft);
  --ds-ai-ink:   var(--ds-a-ink);

  /* ============ WARM ACCENT — for CTAs / highlights ============ */
  --ds-warm:      oklch(0.700 0.130 75);
  --ds-warm-soft: oklch(0.97 0.030 75);
  --ds-warm-ink:  oklch(0.460 0.120 65);

  /* ============ STATUS ============ */
  --ds-hot:        oklch(0.580 0.165 25);
  --ds-hot-soft:   oklch(0.96 0.025 25);
  --ds-hot-ink:    oklch(0.450 0.155 25);

  --ds-cool:       oklch(0.65 0.12 230);
  --ds-cool-soft:  oklch(0.96 0.020 230);

  --ds-success:     oklch(0.580 0.115 155);
  --ds-success-soft:oklch(0.96 0.025 155);
  --ds-success-ink: oklch(0.420 0.110 155);

  --ds-warning:     var(--ds-warm);
  --ds-warning-soft:var(--ds-warm-soft);
  --ds-warning-ink: var(--ds-warm-ink);

  --ds-error:      var(--ds-hot);
  --ds-error-soft: var(--ds-hot-soft);
  --ds-error-ink:  var(--ds-hot-ink);

  /* ============ TYPOGRAPHY ============ */
  --ds-font-display: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ds-font-ui:      'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ds-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* sizes */
  --ds-fs-xs:   10.5px;
  --ds-fs-sm:   11.5px;
  --ds-fs-md:   13px;
  --ds-fs-base: 13.5px;
  --ds-fs-lg:   15px;
  --ds-fs-h4:   18px;
  --ds-fs-h3:   22px;
  --ds-fs-h2:   28px;
  --ds-fs-h1:   38px;
  --ds-fs-display: 56px;

  /* line heights */
  --ds-lh-tight:  1.1;
  --ds-lh-snug:   1.25;
  --ds-lh-normal: 1.45;
  --ds-lh-loose:  1.6;

  /* weights */
  --ds-fw-regular:  400;
  --ds-fw-medium:   500;
  --ds-fw-semibold: 600;
  --ds-fw-bold:     700;

  /* letter spacing */
  --ds-tracking-tight:  -0.025em;
  --ds-tracking-snug:   -0.015em;
  --ds-tracking-normal: -0.005em;
  --ds-tracking-wide:    0.08em;
  --ds-tracking-eyebrow: 0.09em;

  /* ============ SPACING ============ */
  --ds-s-1:  2px;
  --ds-s-2:  4px;
  --ds-s-3:  6px;
  --ds-s-4:  8px;
  --ds-s-5:  10px;
  --ds-s-6:  12px;
  --ds-s-7:  14px;
  --ds-s-8:  16px;
  --ds-s-10: 20px;
  --ds-s-12: 24px;
  --ds-s-14: 28px;
  --ds-s-16: 32px;
  --ds-s-20: 40px;
  --ds-s-24: 48px;
  --ds-s-32: 64px;

  /* ============ RADIUS ============ */
  --ds-r-xs: 3px;
  --ds-r-sm: 5px;
  --ds-r:    6px;
  --ds-r-md: 8px;
  --ds-r-lg: 10px;
  --ds-r-xl: 14px;
  --ds-r-pill: 999px;

  /* ============ SHADOWS — soft graphite ============ */
  --ds-shadow-xs: 0 1px 0 oklch(0.18 0.01 250 / 0.04);
  --ds-shadow-sm: 0 1px 2px oklch(0.18 0.01 250 / 0.05), 0 1px 0 oklch(0.18 0.01 250 / 0.04);
  --ds-shadow-md: 0 2px 8px oklch(0.18 0.01 250 / 0.06), 0 1px 0 oklch(0.18 0.01 250 / 0.04);
  --ds-shadow-lg: 0 12px 32px -8px oklch(0.18 0.01 250 / 0.14), 0 2px 6px oklch(0.18 0.01 250 / 0.05);
  --ds-shadow-focus: 0 0 0 3px var(--ds-a-soft);

  /* ============ DENSITY ============ */
  --ds-row-h:    38px;
  --ds-row-h-lg: 48px;
  --ds-row-gap:  14px;

  /* ============ TRANSITIONS ============ */
  --ds-t-fast: 100ms ease;
  --ds-t-med:  180ms cubic-bezier(0.2, 0, 0, 1);
  --ds-t-slow: 280ms cubic-bezier(0.2, 0, 0, 1);
}

/* ============ LEGACY ALIASES — keep old code working ============ */
:root {
  --bg: var(--ds-bg);
  --bg-2: var(--ds-bg-muted);
  --surface: var(--ds-surface);
  --surface-2: var(--ds-surface-2);
  --surface-3: var(--ds-surface-3);
  --border: var(--ds-border);
  --border-strong: var(--ds-border-strong);
  --ink: var(--ds-ink);
  --ink-2: var(--ds-ink-2);
  --muted: var(--ds-muted);
  --muted-2: var(--ds-muted-2);
  --brand: var(--ds-a);
  --brand-2: var(--ds-a-hover);
  --brand-soft: var(--ds-a-soft);
  --brand-ink: var(--ds-a-ink);
  --a: var(--ds-a);
  --a-hover: var(--ds-a-hover);
  --a-soft: var(--ds-a-soft);
  --a-ink: var(--ds-a-ink);
  --a-bright: var(--ds-a-bright);
  --ai: var(--ds-ai);
  --ai-soft: var(--ds-ai-soft);
  --ai-ink: var(--ds-ai-ink);
  --hot: var(--ds-hot);
  --hot-soft: var(--ds-hot-soft);
  --warm: var(--ds-warm);
  --cool: var(--ds-cool);
  --ok: var(--ds-success);
  --ok-soft: var(--ds-success-soft);
  --success: var(--ds-success);
  --warning: var(--ds-warning);
  --error: var(--ds-error);
  --radius: var(--ds-r);
  --radius-sm: var(--ds-r-sm);
  --radius-lg: var(--ds-r-lg);
  --r-xs: var(--ds-r-xs);
  --r-sm: var(--ds-r-sm);
  --r: var(--ds-r);
  --r-md: var(--ds-r-md);
  --shadow-sm: var(--ds-shadow-sm);
  --shadow-md: var(--ds-shadow-md);
  --shadow-lg: var(--ds-shadow-lg);
  --font-display: var(--ds-font-display);
  --font-ui: var(--ds-font-ui);
  --font-mono: var(--ds-font-mono);
  --n-50: var(--ds-n-50);
  --n-100: var(--ds-n-100);
  --n-150: var(--ds-n-150);
  --n-200: var(--ds-n-200);
  --n-300: var(--ds-n-300);
  --n-400: var(--ds-n-400);
  --n-500: var(--ds-n-500);
  --n-600: var(--ds-n-600);
  --n-700: var(--ds-n-700);
  --n-800: var(--ds-n-800);
  --n-900: var(--ds-n-900);
}