/* themes.css — light/dark, primary, surface, layout, density maps */

/* -------------------------------------------------------------------------- */
/* Primary color maps — extend by adding a block + registry entry in theme.js */
/* -------------------------------------------------------------------------- */

html[data-primary="indigo"] {
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --primary-contrast: #ffffff;
}

html[data-primary="violet"] {
  --primary: #8b5cf6;
  --primary-hover: #7c3aed;
  --primary-contrast: #ffffff;
}

html[data-primary="purple"] {
  --primary: #a855f7;
  --primary-hover: #9333ea;
  --primary-contrast: #ffffff;
}

html[data-primary="fuchsia"] {
  --primary: #d946ef;
  --primary-hover: #c026d3;
  --primary-contrast: #ffffff;
}

html[data-primary="pink"] {
  --primary: #ec4899;
  --primary-hover: #db2777;
  --primary-contrast: #ffffff;
}

html[data-primary="rose"] {
  --primary: #f43f5e;
  --primary-hover: #e11d48;
  --primary-contrast: #ffffff;
}

html[data-primary="red"] {
  --primary: #ef4444;
  --primary-hover: #dc2626;
  --primary-contrast: #ffffff;
}

html[data-primary="orange"] {
  --primary: #f97316;
  --primary-hover: #ea580c;
  --primary-contrast: #ffffff;
}

html[data-primary="amber"] {
  --primary: #f59e0b;
  --primary-hover: #d97706;
  --primary-contrast: #0f172a;
}

html[data-primary="yellow"] {
  --primary: #eab308;
  --primary-hover: #ca8a04;
  --primary-contrast: #0f172a;
}

html[data-primary="lime"] {
  --primary: #84cc16;
  --primary-hover: #65a30d;
  --primary-contrast: #0f172a;
}

html[data-primary="green"] {
  --primary: #22c55e;
  --primary-hover: #16a34a;
  --primary-contrast: #ffffff;
}

html[data-primary="emerald"] {
  --primary: #10b981;
  --primary-hover: #059669;
  --primary-contrast: #ffffff;
}

html[data-primary="teal"] {
  --primary: #14b8a6;
  --primary-hover: #0d9488;
  --primary-contrast: #ffffff;
}

html[data-primary="cyan"] {
  --primary: #06b6d4;
  --primary-hover: #0891b2;
  --primary-contrast: #ffffff;
}

html[data-primary="sky"] {
  --primary: #0ea5e9;
  --primary-hover: #0284c7;
  --primary-contrast: #ffffff;
}

html[data-primary="blue"] {
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --primary-contrast: #ffffff;
}

/* -------------------------------------------------------------------------- */
/* Surface maps — greyscale families */
/* -------------------------------------------------------------------------- */

html[data-surface="slate"] {
  --surface-ground: #f1f5f9;
  --surface-card: #ffffff;
  --surface-overlay: #ffffff;
  --surface-hover: #e2e8f0;
  --border: #e2e8f0;
  --text: #0f172a;
  --text-muted: #64748b;
}

html[data-surface="gray"] {
  --surface-ground: #f3f4f6;
  --surface-card: #ffffff;
  --surface-overlay: #ffffff;
  --surface-hover: #e5e7eb;
  --border: #e5e7eb;
  --text: #111827;
  --text-muted: #6b7280;
}

html[data-surface="zinc"] {
  --surface-ground: #f4f4f5;
  --surface-card: #ffffff;
  --surface-overlay: #ffffff;
  --surface-hover: #e4e4e7;
  --border: #e4e4e7;
  --text: #18181b;
  --text-muted: #71717a;
}

html[data-surface="neutral"] {
  --surface-ground: #f5f5f5;
  --surface-card: #ffffff;
  --surface-overlay: #ffffff;
  --surface-hover: #e5e5e5;
  --border: #e5e5e5;
  --text: #171717;
  --text-muted: #737373;
}

html[data-surface="stone"] {
  --surface-ground: #f5f5f4;
  --surface-card: #ffffff;
  --surface-overlay: #ffffff;
  --surface-hover: #e7e5e4;
  --border: #e7e5e4;
  --text: #1c1917;
  --text-muted: #78716c;
}

html[data-surface="cool"] {
  --surface-ground: #f0f4f8;
  --surface-card: #ffffff;
  --surface-overlay: #ffffff;
  --surface-hover: #d9e2ec;
  --border: #d9e2ec;
  --text: #102a43;
  --text-muted: #627d98;
}

html[data-surface="warm"] {
  --surface-ground: #f7f3ef;
  --surface-card: #ffffff;
  --surface-overlay: #ffffff;
  --surface-hover: #ebe3da;
  --border: #ebe3da;
  --text: #292524;
  --text-muted: #78716c;
}

html[data-surface="mist"] {
  --surface-ground: #f0f9ff;
  --surface-card: #ffffff;
  --surface-overlay: #ffffff;
  --surface-hover: #e0f2fe;
  --border: #e0f2fe;
  --text: #0c4a6e;
  --text-muted: #64748b;
}

/* -------------------------------------------------------------------------- */
/* Dark color scheme — overrides surfaces / text / elevation only */
/* -------------------------------------------------------------------------- */

html[data-theme="dark"] {
  --surface-ground: #0f172a;
  --surface-card: #1e293b;
  --surface-overlay: #1e293b;
  --surface-hover: #334155;
  --border: #334155;
  --text: #f8fafc;
  --text-muted: #94a3b8;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"][data-surface="gray"] {
  --surface-ground: #111827;
  --surface-card: #1f2937;
  --surface-overlay: #1f2937;
  --surface-hover: #374151;
  --border: #374151;
  --text: #f9fafb;
  --text-muted: #9ca3af;
}

html[data-theme="dark"][data-surface="zinc"] {
  --surface-ground: #09090b;
  --surface-card: #18181b;
  --surface-overlay: #18181b;
  --surface-hover: #27272a;
  --border: #27272a;
  --text: #fafafa;
  --text-muted: #a1a1aa;
}

html[data-theme="dark"][data-surface="neutral"] {
  --surface-ground: #0a0a0a;
  --surface-card: #171717;
  --surface-overlay: #171717;
  --surface-hover: #262626;
  --border: #262626;
  --text: #fafafa;
  --text-muted: #a3a3a3;
}

html[data-theme="dark"][data-surface="stone"] {
  --surface-ground: #0c0a09;
  --surface-card: #1c1917;
  --surface-overlay: #1c1917;
  --surface-hover: #292524;
  --border: #292524;
  --text: #fafaf9;
  --text-muted: #a8a29e;
}

html[data-theme="dark"][data-surface="cool"] {
  --surface-ground: #102a43;
  --surface-card: #243b53;
  --surface-overlay: #243b53;
  --surface-hover: #334e68;
  --border: #334e68;
  --text: #f0f4f8;
  --text-muted: #9fb3c8;
}

html[data-theme="dark"][data-surface="warm"] {
  --surface-ground: #1c1917;
  --surface-card: #292524;
  --surface-overlay: #292524;
  --surface-hover: #44403c;
  --border: #44403c;
  --text: #fafaf9;
  --text-muted: #a8a29e;
}

html[data-theme="dark"][data-surface="mist"] {
  --surface-ground: #0c4a6e;
  --surface-card: #075985;
  --surface-overlay: #075985;
  --surface-hover: #0369a1;
  --border: #0369a1;
  --text: #f0f9ff;
  --text-muted: #bae6fd;
}

/* -------------------------------------------------------------------------- */
/* Sidebar tokens — scheme vs primary (primary only in light; dark → scheme) */
/* -------------------------------------------------------------------------- */

html[data-layout-theme="scheme"],
html[data-theme="dark"][data-layout-theme="primary"] {
  --sidebar-bg: var(--surface-card);
  --sidebar-item: var(--text-muted);
  --sidebar-item-active: var(--primary);
  --sidebar-border: var(--border);
  --sidebar-icon: color-mix(in srgb, var(--text-muted) 82%, transparent);
}

html[data-layout-theme="primary"][data-theme="light"] {
  --sidebar-bg: var(--primary);
  --sidebar-item: var(--primary-contrast);
  --sidebar-item-active: var(--primary-contrast);
  --sidebar-border: color-mix(in srgb, var(--primary) 55%, #000000 45%);
  --sidebar-icon: var(--primary-contrast);
  --sidebar-hover: color-mix(in srgb, var(--primary-contrast) 14%, transparent);
  --sidebar-active: color-mix(in srgb, var(--primary-contrast) 22%, transparent);
}

html[data-layout-theme="primary"][data-theme="light"] .topbar {
  background: var(--sidebar-bg);
  color: var(--sidebar-item);
}

/* The content sheet is rounded, so the corner behind it must match the menu. */
html[data-layout-theme="primary"][data-theme="light"] .app,
html[data-layout-theme="primary"][data-theme="light"] .app-body {
  background: var(--sidebar-bg);
}

html[data-layout-theme="primary"][data-theme="light"] .topbar-brand,
html[data-layout-theme="primary"][data-theme="light"] .topbar-company,
html[data-layout-theme="primary"][data-theme="light"] .topbar-btn,
html[data-layout-theme="primary"][data-theme="light"] .topbar-user-btn,
html[data-layout-theme="primary"][data-theme="light"] .topbar-user-name,
html[data-layout-theme="primary"][data-theme="light"] .topbar-user-caret {
  color: var(--sidebar-item);
}

html[data-layout-theme="primary"][data-theme="light"] .topbar-btn svg,
html[data-layout-theme="primary"][data-theme="light"] .topbar-menu-icon {
  color: var(--sidebar-icon);
}

html[data-layout-theme="primary"][data-theme="light"] .topbar-btn:hover,
html[data-layout-theme="primary"][data-theme="light"] .topbar-btn:focus-visible,
html[data-layout-theme="primary"][data-theme="light"] .topbar-user-btn:hover,
html[data-layout-theme="primary"][data-theme="light"] .topbar-user-btn:focus-visible,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-item:hover,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-item:focus-visible {
  background: var(--sidebar-hover);
  color: var(--sidebar-item);
}

html[data-layout-theme="primary"][data-theme="light"] .sidebar-item.is-active,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-item[aria-current="page"] {
  background: var(--sidebar-active);
  color: var(--sidebar-item-active);
}

html[data-layout-theme="primary"][data-theme="light"] .sidebar-item:hover > i,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-item:focus-visible > i,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-item.is-active > i,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-item[aria-current="page"] > i,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-item:hover > svg,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-item:focus-visible > svg,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-item.is-active > svg,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-item[aria-current="page"] > svg {
  color: var(--sidebar-icon);
}

html[data-layout-theme="primary"][data-theme="light"] .sidebar-item > .badge,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-item.is-active > .badge,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-item:hover > .badge {
  background: color-mix(in srgb, var(--primary-contrast) 18%, transparent);
  color: var(--primary-contrast);
}

/* Icon chip uses the contrast color; the glyph uses the selected primary so it stays readable. */
html[data-layout-theme="primary"][data-theme="light"] .sidebar-item > i.fa,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-item > i.fas,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-item > i.far,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-item > .fa,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-item > svg {
  background: var(--primary-contrast);
  color: var(--primary);
}

/* Nested Job Costing icons are SVGs; the menu rule was painting them white. */
html[data-layout-theme="primary"][data-theme="light"] .sidebar-menu ul .sidebar-item > svg,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-menu ul .sidebar-item:hover > svg,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-menu ul .sidebar-item:focus-visible > svg,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-menu ul .sidebar-item.is-active > svg,
html[data-layout-theme="primary"][data-theme="light"] .sidebar-menu ul .sidebar-item[aria-current="page"] > svg {
  background: var(--primary-contrast);
  color: var(--primary);
}

/* -------------------------------------------------------------------------- */
/* Density & radius */
/* -------------------------------------------------------------------------- */

html[data-density="compact"] {
  --space-3: 0.5rem;
  --space-4: 0.75rem;
  --radius-md: 8px;
}

html[data-density="comfortable"] {
  --space-3: 0.75rem;
  --space-4: 1rem;
  --radius-md: 10px;
}

html[data-radius="sm"] {
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
}

html[data-radius="md"] {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

html[data-radius="lg"] {
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
}

/* -------------------------------------------------------------------------- */
/* Font size — scales rem-based tokens app-wide via html font-size */
/* -------------------------------------------------------------------------- */

html[data-font-size="sm"] {
  font-size: 87.5%; /* ~14px root */
}

html[data-font-size="md"] {
  font-size: 100%;
}

html[data-font-size="lg"] {
  font-size: 112.5%; /* ~18px root */
}