/** * Design tokens — ported from better-segment's shadcn-vue/Tailwind theme * (resources/css/app.css) into plain CSS custom properties. No Tailwind, * no @theme mapping layer — every hand-written stylesheet in this project * should reference these variables directly (e.g. `color: var(--primary)`). * * Light values live on :root. Dark values apply when the element has * a `dark` class — toggled by app.js based on the `appearance` cookie * (system/light/dark), mirroring the old AppearanceTabs behavior. */ :root { --background: hsl(0 0% 100%); --foreground: hsl(0 0% 3.9%); --card: hsl(0 0% 100%); --card-foreground: hsl(0 0% 3.9%); --popover: hsl(0 0% 100%); --popover-foreground: hsl(0 0% 3.9%); /* Brand purple (#846bff). White foreground text lands ~3.9:1 on this — below AA for normal text, ok for large text/UI components only. */ --primary: hsl(250 100% 71%); --primary-foreground: hsl(0 0% 100%); --secondary: hsl(0 0% 92.1%); --secondary-foreground: hsl(0 0% 9%); --muted: hsl(0 0% 96.1%); --muted-foreground: hsl(0 0% 45.1%); --accent: hsl(0 0% 96.1%); --accent-foreground: hsl(0 0% 9%); --destructive: hsl(0 84.2% 60.2%); --destructive-foreground: hsl(0 0% 98%); --border: hsl(0 0% 92.8%); --input: hsl(0 0% 89.8%); --ring: hsl(250 100% 71%); --chart-1: hsl(250 94% 45%); --chart-2: hsl(213 68% 52%); --chart-3: hsl(258 46% 43%); --chart-4: hsl(38 100% 47%); --chart-5: hsl(0 76% 60%); --sidebar: hsl(0 0% 98%); --sidebar-foreground: hsl(240 5.3% 26.1%); --sidebar-primary: hsl(250 100% 71%); --sidebar-primary-foreground: hsl(0 0% 100%); --sidebar-accent: hsl(250 45% 93%); --sidebar-accent-foreground: hsl(250 88% 18%); --sidebar-border: hsl(0 0% 91%); --sidebar-ring: hsl(250 100% 71%); --radius: 0.625rem; --radius-lg: var(--radius); --radius-md: calc(var(--radius) - 2px); --radius-sm: calc(var(--radius) - 4px); --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* Spacing scale — same steps Tailwind's default utilities used, kept so hand-written CSS can stay consistent without a utility framework. */ --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; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; } :root.dark { --background: hsl(0 0% 3.9%); --foreground: hsl(0 0% 98%); --card: hsl(0 0% 3.9%); --card-foreground: hsl(0 0% 98%); --popover: hsl(0 0% 3.9%); --popover-foreground: hsl(0 0% 98%); /* Brand purple (#846bff) — bright enough to read on a near-black surface. */ --primary: hsl(250 100% 71%); --primary-foreground: hsl(250 84% 8%); --secondary: hsl(0 0% 14.9%); --secondary-foreground: hsl(0 0% 98%); --muted: hsl(0 0% 16.08%); --muted-foreground: hsl(0 0% 63.9%); --accent: hsl(0 0% 14.9%); --accent-foreground: hsl(0 0% 98%); --destructive: hsl(0 84% 60%); --destructive-foreground: hsl(0 0% 98%); --border: hsl(0 0% 14.9%); --input: hsl(0 0% 14.9%); --ring: hsl(250 100% 71%); --chart-1: hsl(250 100% 71%); --chart-2: hsl(213 82% 63%); --chart-3: hsl(255 78% 76%); --chart-4: hsl(35 91% 55%); --chart-5: hsl(0 79% 68%); --sidebar: hsl(240 5.9% 10%); --sidebar-foreground: hsl(0 0% 95.9%); --sidebar-primary: hsl(250 100% 71%); --sidebar-primary-foreground: hsl(250 84% 8%); --sidebar-accent: hsl(250 40% 14%); --sidebar-accent-foreground: hsl(250 64% 75%); --sidebar-border: hsl(0 0% 15.9%); --sidebar-ring: hsl(250 100% 71%); }