/* ============================================================================
   Design tokens — three layers: primitive → semantic → component.
   Components NEVER use a primitive or a raw hex: they read semantic or
   component tokens, so a tenant rebrand is a semantic-layer override
   (see [data-brand] at the bottom). Ports 1:1 to a Tailwind v4 @theme later.
   ========================================================================== */

/* ── Layer 1: primitives (raw values, no meaning) ─────────────────────────── */
:root {
  --slate-0: #FFFFFF;
  --slate-25: #F8FAFC;
  --slate-50: #F1F5F9;
  --slate-100: #E2E8F0;
  --slate-300: #94A3B8;
  --slate-500: #475569;
  --slate-700: #1E293B;
  --slate-900: #0F172A;
  --night-950: #0B1120;
  --night-900: #111827;
  --night-850: #172033;
  --night-700: #263247;
  --night-300: #94A3B8;
  --night-200: #CBD5E1;
  --night-50: #E6EDF6;

  --blue-50: #EFF6FF;
  --blue-400: #60A5FA;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --green-50: #ECFDF5;
  --green-400: #34D399;
  --green-700: #047857;
  --amber-50: #FFFBEB;
  --amber-400: #FBBF24;
  --amber-700: #B45309;
  --red-50: #FEF2F2;
  --red-400: #F87171;
  --red-700: #B91C1C;
  --red-800: #991B1B;

  /* Category pairs (data colour only: tags, owners, stages, branches) */
  --cat-0: #DC2626; --cat-0-bg: #FEF2F2;
  --cat-1: #059669; --cat-1-bg: #ECFDF5;
  --cat-2: #2563EB; --cat-2-bg: #EFF6FF;
  --cat-3: #D97706; --cat-3-bg: #FFFBEB;
  --cat-4: #7C3AED; --cat-4-bg: #F5F3FF;
  --cat-5: #0D9488; --cat-5-bg: #F0FDFA;
  --cat-6: #DB2777; --cat-6-bg: #FDF2F8;
  --cat-7: #EA580C; --cat-7-bg: #FFF7ED;
  --cat-8: #0284C7; --cat-8-bg: #F0F9FF;
  --cat-9: #16A34A; --cat-9-bg: #F0FDF4;

  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --radius-4: 0.25rem;
  --radius-6: 0.375rem;
  --radius-8: 0.5rem;
  --radius-12: 0.75rem;
  --radius-pill: 9999px;

  --shadow-pop: 0 4px 12px rgb(15 23 42 / 0.12);
  --shadow-modal: 0 8px 24px rgb(15 23 42 / 0.16);
  --shadow-raise: 0 1px 2px rgb(15 23 42 / 0.06);
  --ease: 150ms ease;
}

/* ── Layer 2: semantic (meaning; the only layer themes override) ──────────── */
:root {
  color-scheme: light;
  --bg: var(--slate-25);
  --surface: var(--slate-0);
  --surface-sunken: var(--slate-50);
  --fg: var(--slate-900);
  --muted: var(--slate-500);
  --faint: var(--slate-300);
  --border: var(--slate-100);
  --ring: var(--blue-600);
  --link: var(--blue-600);
  --primary: var(--blue-600);
  --primary-hover: var(--blue-700);
  --primary-tint: var(--blue-50);
  --on-primary: var(--slate-0);
  --success: var(--green-700);
  --success-tint: var(--green-50);
  --warning: var(--amber-700);
  --warning-tint: var(--amber-50);
  --danger: var(--red-700);
  --danger-hover: var(--red-800);
  --danger-tint: var(--red-50);
  --overlay: rgb(15 23 42 / 0.32);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--night-950);
    --surface: var(--night-900);
    --surface-sunken: var(--night-850);
    --fg: var(--night-50);
    --muted: var(--night-200);
    --faint: var(--night-300);
    --border: var(--night-700);
    --ring: var(--blue-400);
    --link: var(--blue-400);
    --primary-tint: rgb(37 99 235 / 0.18);
    --success: var(--green-400);
    --success-tint: rgb(52 211 153 / 0.12);
    --warning: var(--amber-400);
    --warning-tint: rgb(251 191 36 / 0.12);
    --danger: var(--red-400);
    --danger-hover: var(--red-400);
    --danger-tint: rgb(248 113 113 / 0.12);
    --overlay: rgb(0 0 0 / 0.55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--night-950);
  --surface: var(--night-900);
  --surface-sunken: var(--night-850);
  --fg: var(--night-50);
  --muted: var(--night-200);
  --faint: var(--night-300);
  --border: var(--night-700);
  --ring: var(--blue-400);
  --link: var(--blue-400);
  --primary-tint: rgb(37 99 235 / 0.18);
  --success: var(--green-400);
  --success-tint: rgb(52 211 153 / 0.12);
  --warning: var(--amber-400);
  --warning-tint: rgb(251 191 36 / 0.12);
  --danger: var(--red-400);
  --danger-hover: var(--red-400);
  --danger-tint: rgb(248 113 113 / 0.12);
  --overlay: rgb(0 0 0 / 0.55);
}

/* ── Layer 3: component tokens ────────────────────────────────────────────── */
:root {
  --sidebar-w: 15rem;
  --topbar-h: 3.25rem;
  --btn-h: 2rem;
  --input-h: 2.25rem;
  --row-h: 2.5rem;
  --zone-pad: var(--space-5);
  --panel-w: 26rem;
  --kanban-col-w: 17rem;
  --table-head-bg: var(--surface-sunken);
  --nav-active-bg: var(--primary-tint);
  --nav-active-fg: var(--primary);
}
/* Agent mode (?agent=true, from OpenCRM): bigger targets for browser agents. */
:root[data-agent] {
  --btn-h: 2.5rem;
  --input-h: 2.5rem;
  --row-h: 2.75rem;
}

/* Per-tenant brand: the API returns tenant.brand; the shell sets data-brand.
   ponytail: two fixed brands; a real tenant brand sets --primary inline. */
:root[data-brand="saffron"] {
  --primary: #C2410C;
  --primary-hover: #9A3412;
  --primary-tint: rgb(194 65 12 / 0.1);
  --ring: #C2410C;
}