:root {
  /* Body typography reference — do not set on html (rem/Tailwind use 16px root) */
  --font-size: 14px;

  /* ── TYPOGRAPHY (runtime CSS vars — used by inline styles + Tailwind) */
  --font-family-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-family-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-display: var(--font-family-display);
  --font-sans: var(--font-family-sans);
  --font-mono: var(--font-family-mono);
  --font-heading: var(--font-family-display);

  /* ── TYPOGRAPHY SCALE ───────────────────────────────────────────── */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.08em;

  /* ── LAYOUT SPACING ─────────────────────────────────────────────── */
  --spacing-sidebar: 244px;
  --spacing-topbar: 64px;
  --spacing-sidebar-collapsed: 76px;

  /* ── RADIUS SCALE (scale resolves to 4 / 6 / 8 / 12) ────────────── */
  --radius: 8px;
  --radius-md: 6px;
  --radius-sm: 4px;
  --radius-xl: 12px;

  /* ── ELEVATION ──────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(22, 30, 56, 0.06), 0 1px 2px rgba(22, 30, 56, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(22, 30, 56, 0.08), 0 2px 4px -2px rgba(22, 30, 56, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(22, 30, 56, 0.1), 0 4px 6px -4px rgba(22, 30, 56, 0.08);
  --shadow-brand-mark: 0 2px 6px -1px rgba(28, 117, 188, 0.45);

  /* ── SHADCN BASE (Sea Haven DS) ──────────────────────────────────── */
  --background: #ffffff;
  --foreground: #262262;
  --placeholder-foreground: color-mix(in srgb, var(--foreground) 50%, transparent);
  --card: #ffffff;
  --card-foreground: #262262;
  --popover: #ffffff;
  --popover-foreground: #262262;
  --primary: #1c75bc;
  --primary-hover: #155a92;
  --primary-foreground: #ffffff;
  --secondary: #f1f4f9;
  --secondary-foreground: #262262;
  --muted: #e6e7e8;
  --muted-foreground: #58595b;
  --accent: #27aae1;
  --accent-foreground: #ffffff;
  --success: #00a79d;
  --warning: #d97706;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #dfe3ea;
  --border-hover: #c8d0e0;
  --input: transparent;
  --input-background: #f9fafb;
  --switch-background: #c8d0e0;
  --ring: #1c75bc;

  --chart-1: #1c75bc;
  --chart-2: #00a79d;
  --chart-3: #d97706;
  --chart-4: #7c3aed;
  --chart-5: #dc2626;

  /* ── SIDEBAR (light surface — Sea Haven DS) ──────────────────────── */
  --sidebar: #f6f8fb;
  --sidebar-bg: #f6f8fb;
  --sidebar-foreground: #262262;
  --sidebar-primary: #1c75bc;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #e6f4fb;
  --sidebar-accent-foreground: #155a92;
  --sidebar-border: #dfe3ea;
  --sidebar-ring: #1c75bc;

  /* ── SEAHAVEN SEMANTIC ALIASES (consumed across the app) ────────── */
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-primary-foreground: #ffffff;
  --color-primary-tint: #e6f4fb;
  --color-accent: var(--accent);

  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--foreground);
  --color-ring: var(--ring);

  --color-bg-page: #f9fafb;
  --color-bg-surface: var(--card);
  --color-bg-muted: #f1f4f9;
  --color-border: var(--border);
  --color-border-hover: #c8d0e0;
  --color-text-primary: var(--foreground);
  --color-text-secondary: #58595b;
  --color-text-muted: #6b7a96;
  --color-text-inverse: #ffffff;

  /* ── SIDEBAR ALIASES (light) ────────────────────────────────────── */
  --color-sidebar-bg: var(--sidebar-bg);
  --color-sidebar-text: #262262;
  --color-sidebar-text-hover: #155a92;
  --color-sidebar-active-bg: var(--sidebar-accent);
  --color-sidebar-active-text: var(--sidebar-accent-foreground);
  --color-sidebar-hover-bg: #eef2f7;
  --color-sidebar-label: #6b7a96;
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-badge-bg: #e6f4fb;
  --color-sidebar-badge-text: #155a92;
  --color-sidebar-item-active-bg: var(--card);
  --color-sidebar-item-active-shadow: 0 1px 3px rgba(38, 34, 98, 0.08);

  /* ── SEMANTIC (universal meaning) ───────────────────────────────── */
  --color-destructive: var(--destructive);
  --color-destructive-fg: #ffffff;
  --color-warning: var(--warning);
  --color-success: var(--success);

  /* ── WO TYPE TOKENS (immutable — CLAUDE.md §3) ──────────────────── */
  --type-pm-bg: #eff6ff;
  --type-pm-text: #1d4ed8;
  --type-reactive-bg: #fff7ed;
  --type-reactive-text: #c2410c;
  --type-emergency-bg: #fef2f2;
  --type-emergency-text: #b91c1c;
  --type-addon-bg: #f5f3ff;
  --type-addon-text: #6d28d9;
  --type-overdue-bg: #fff1f2;
  --type-overdue-text: #9f1239;

  /* ── WO STATUS TOKENS (immutable) ───────────────────────────────── */
  --status-incomplete-bg: #f3f4f6;
  --status-incomplete-text: #374151;
  --status-pending-bg: #fff7ed;
  --status-pending-text: #92400e;
  --status-scheduled-bg: #eff6ff;
  --status-scheduled-text: #1e40af;
  --status-inroute-bg: #f0f9ff;
  --status-inroute-text: #0369a1;
  --status-onsite-bg: #ecfdf5;
  --status-onsite-text: #065f46;
  --status-inprogress-bg: #eff6ff;
  --status-inprogress-text: #1d4ed8;
  --status-completed-bg: #f0fdf4;
  --status-completed-text: #166534;
  --status-rescheduled-bg: #fffbeb;
  --status-rescheduled-text: #92400e;
  --status-canceled-bg: #f9fafb;
  --status-canceled-text: #6b7280;
  --status-pendingquote-bg: #faf5ff;
  --status-pendingquote-text: #6b21a8;
  --status-pastdue-bg: #fff1f2;
  --status-pastdue-text: #9f1239;

  /* ── COMPLETION DOCUMENT (immutable) ────────────────────────────── */
  --doc-yes-bg: #f0fdf4;
  --doc-yes-text: #166534;
  --doc-no-bg: #fff1f2;
  --doc-no-text: #be123c;
  --doc-nn-bg: #f3f4f6;
  --doc-nn-text: #6b7280;

  /* ── CARRIED OVER / RESCHEDULE INDICATORS (immutable) ───────────── */
  --indicator-co-1-bg: #fffbeb;
  --indicator-co-1-text: #92400e;
  --indicator-co-2-bg: #fef3c7;
  --indicator-co-2-text: #b45309;
  --indicator-co-3-bg: #fef2f2;
  --indicator-co-3-text: #9f1239;

  /* ── SLA (immutable) ────────────────────────────────────────────── */
  --sla-safe: #16a34a;
  --sla-warning: #d97706;
  --sla-critical: #dc2626;

  /* ── LAB (experiment UI accents) ────────────────────────────────── */
  --color-lab-accent-bg: #fef3c7;
  --color-lab-accent-text: #92400e;
  --color-lab-accent-border: #f59e0b;

  /* ── HEADER (app shell top bar) ─────────────────────────────────── */
  --color-header-bg-start: #1b1f52;
  --color-header-bg-mid: #1c4f8f;
  --color-header-bg-end: var(--primary);
  --color-header-gradient: linear-gradient(
    100deg,
    var(--color-header-bg-start) 0%,
    var(--color-header-bg-mid) 58%,
    var(--color-header-bg-end) 100%
  );
  --color-header-shadow: 0 1px 0 rgba(38, 34, 98, 0.18), 0 6px 18px -10px rgba(28, 117, 188, 0.5);
  --color-header-surface: rgba(255, 255, 255, 0.08);
  --color-header-surface-hover: rgba(255, 255, 255, 0.18);
  --color-header-chip-hover: rgba(255, 255, 255, 0.12);
  --color-header-icon: #eaf3fb;
  --color-header-text: #ffffff;
  --color-header-text-muted: #bdd8f0;
  --color-header-avatar-ring: rgba(255, 255, 255, 0.25);

  /* ── SERVICE TYPE TOKENS (Completion Docs) ──────────────────────── */
  --service-scrubber-pit-bg: #eff6ff;
  --service-scrubber-pit-text: #1d4ed8;
  --service-backflow-preventers-bg: #ecfdf5;
  --service-backflow-preventers-text: #065f46;
  --service-tank-water-heater-bg: #fff7ed;
  --service-tank-water-heater-text: #c2410c;
  --service-floor-drain-bg: #f0f9ff;
  --service-floor-drain-text: #0369a1;
  --service-hvac-bg: #f5f3ff;
  --service-hvac-text: #6d28d9;
  --service-parking-lot-lighting-bg: #fffbeb;
  --service-parking-lot-lighting-text: #92400e;
  --service-pumping-systems-bg: #faf5ff;
  --service-pumping-systems-text: #6b21a8;
  --service-door-hardware-bg: #f0fdf4;
  --service-door-hardware-text: #166534;
  --service-pressure-reducing-valve-bg: #fff1f2;
  --service-pressure-reducing-valve-text: #9f1239;
  --service-fire-suppression-bg: #fef2f2;
  --service-fire-suppression-text: #b91c1c;
}

@theme inline {
  --font-display: var(--font-family-display);
  --font-sans: var(--font-family-sans);
  --font-mono: var(--font-family-mono);
  --font-heading: var(--font-family-display);

  --spacing-sidebar: var(--spacing-sidebar);
  --spacing-topbar: var(--spacing-topbar);
  --spacing-sidebar-collapsed: var(--spacing-sidebar-collapsed);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-input-background: var(--input-background);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-success: var(--success);
  --color-warning: var(--warning);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
}