/* * Design tokens — semantic color & sizing vars. * * Mirrors shadcn v2 palette (OKLCH) + Tailwind v4 conventions. * Toggle dark mode by adding `.dark` class to ; all utilities & component * styles resolve colors through these vars so nothing needs to be duplicated. */ :root { /* ─── Colors (light) ──────────────────────────────── */ --color-background: oklch(100% 0 0); --color-foreground: oklch(14.5% 0.03 265); --color-card: oklch(100% 0 0); --color-card-foreground: oklch(14.5% 0.03 265); --color-popover: oklch(100% 0 0); --color-popover-foreground: oklch(14.5% 0.03 265); --color-primary: oklch(21% 0.03 265); --color-primary-foreground: oklch(98.5% 0 0); --color-secondary: oklch(96.5% 0.005 265); --color-secondary-foreground: oklch(21% 0.03 265); --color-muted: oklch(96.5% 0.005 265); --color-muted-foreground: oklch(55% 0.02 265); --color-accent: oklch(96.5% 0.005 265); --color-accent-foreground: oklch(21% 0.03 265); --color-destructive: oklch(57% 0.22 27); --color-destructive-foreground:oklch(98.5% 0 0); --color-success: oklch(62% 0.17 145); --color-success-foreground: oklch(98.5% 0 0); --color-warning: oklch(78% 0.15 85); --color-warning-foreground: oklch(14.5% 0.03 265); --color-info: oklch(65% 0.15 235); --color-info-foreground: oklch(98.5% 0 0); --color-border: oklch(92% 0.008 265); --color-input: oklch(92% 0.008 265); --color-ring: oklch(21% 0.03 265); /* ─── Radii ───────────────────────────────────────── */ --radius-none: 0; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-full: 9999px; /* ─── Spacing (matches Tailwind 0.25rem base) ────── */ --space-0: 0; --space-0-5: 0.125rem; --space-1: 0.25rem; --space-1-5: 0.375rem; --space-2: 0.5rem; --space-2-5: 0.625rem; --space-3: 0.75rem; --space-3-5: 0.875rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ─── Typography ──────────────────────────────────── */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.015em; /* ─── Shadows ─────────────────────────────────────── */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.06); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.06); /* ─── Z-index layers ──────────────────────────────── */ --z-base: 1; --z-dropdown: 40; --z-sticky: 50; --z-overlay: 100; --z-modal: 200; --z-toast: 300; /* ─── Motion ──────────────────────────────────────── */ --duration-fast: 120ms; --duration-normal: 180ms; --duration-slow: 280ms; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); } .dark { --color-background: oklch(14.5% 0.03 265); --color-foreground: oklch(98.5% 0 0); --color-card: oklch(18% 0.03 265); --color-card-foreground: oklch(98.5% 0 0); --color-popover: oklch(18% 0.03 265); --color-popover-foreground: oklch(98.5% 0 0); --color-primary: oklch(98.5% 0 0); --color-primary-foreground: oklch(21% 0.03 265); --color-secondary: oklch(22% 0.03 265); --color-secondary-foreground: oklch(98.5% 0 0); --color-muted: oklch(22% 0.03 265); --color-muted-foreground: oklch(65% 0.02 265); --color-accent: oklch(22% 0.03 265); --color-accent-foreground: oklch(98.5% 0 0); --color-destructive: oklch(50% 0.2 27); --color-destructive-foreground:oklch(98.5% 0 0); --color-success: oklch(55% 0.16 145); --color-success-foreground: oklch(98.5% 0 0); --color-warning: oklch(70% 0.14 85); --color-warning-foreground: oklch(14.5% 0.03 265); --color-info: oklch(60% 0.14 235); --color-info-foreground: oklch(98.5% 0 0); --color-border: oklch(24% 0.02 265); --color-input: oklch(24% 0.02 265); --color-ring: oklch(85% 0.02 265); } /* ─── Reduced motion ────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; } }