/* * Design tokens + the few accent-derived styles Tailwind can't express from a * hex custom property. Everything else is Tailwind utility classes (CDN), with * the surface/border/text vars referenced via arbitrary values, e.g. bg-[--surface]. * --accent is injected per-industry on . */ :root { --accent: #2563eb; /* overridden inline per industry */ --bg: #ffffff; --surface: #f8fafc; --border: #e2e8f0; --text: #0f172a; --muted: #64748b; --success: #16a34a; --danger: #dc2626; --warning: #d97706; --radius: 6px; --sidebar-width: 240px; } body { font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: 14px; } /* Accent tint backgrounds (opacity modifiers don't work on a hex var) */ .bg-accent-soft { background-color: color-mix(in srgb, var(--accent) 10%, white); } .badge-accent { color: var(--accent); background-color: color-mix(in srgb, var(--accent) 14%, white); } /* Sidebar active item: accent text + soft bg + left bar (!important to beat Tailwind utilities) */ .nav-active { color: var(--accent) !important; background-color: color-mix(in srgb, var(--accent) 8%, white) !important; border-left-color: var(--accent) !important; } /* Inputs/selects: accent focus ring without a glow */ .input { border: 1px solid var(--border); border-radius: var(--radius); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } /* Alpine.js: hide elements until Alpine initialises */ [x-cloak] { display: none !important; } /* Upgrade hint (Professional): blue left border, more prominent than Starter */ .upgrade-pro { border-left: 3px solid var(--accent); background-color: color-mix(in srgb, var(--accent) 6%, white); }