/* ========================================================= shadcn/ui design tokens — Zinc base + Amber primary --------------------------------------------------------- Drop into any HTML file, then add `class="light"` (default) or `class="dark"` to . All component styles in components.css consume these vars. ========================================================= */ /* Webfonts -------------------------------------------------- */ /* Geist Sans (UI) + Geist Mono (code) — Vercel/shadcn modern default. * Self-hosted by fonts.css from woff2 files this template ships * itself (issue #95). This file used to `@import` them from * fonts.googleapis.com, a render-blocking third-party request on * every cold load; see fonts.css for why that request is gone. */ /* ============================================================ Light theme (default) ============================================================ */ :root, .light { /* shadcn semantic tokens — HSL triplets, wrap in hsl() at use site */ --background: 0 0% 100%; --foreground: 240 10% 3.9%; /* zinc-950 */ --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; /* PRIMARY — amber #faad14 retained from the previous system */ --primary: 40 96% 53%; /* #faad14 */ --primary-foreground: 240 10% 3.9%; /* near-black on amber for AA */ --secondary: 240 4.8% 95.9%; /* zinc-100 */ --secondary-foreground: 240 5.9% 10%; /* zinc-900 */ --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; /* zinc-500 */ --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; /* red-500-ish */ --destructive-foreground: 0 0% 98%; --success: 142 71% 45%; --success-foreground: 0 0% 98%; --warning: 38 92% 50%; --warning-foreground: 240 10% 3.9%; --info: 217 91% 60%; --info-foreground: 0 0% 98%; --border: 240 5.9% 90%; /* zinc-200 */ --input: 240 5.9% 90%; --ring: 40 96% 53%; /* amber focus ring */ /* Chart palette (shadcn convention) */ --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; /* Radius — shadcn `default` = 0.5rem; New York = 0.5; Stone = 0.95 */ --radius: 0.5rem; /* Spacing — Tailwind 4px scale, named to read clearly */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* Typography */ --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-display: "Geist", ui-sans-serif, system-ui, sans-serif; /* Type scale (Tailwind defaults) */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 1.875rem; /* 30 */ --text-4xl: 2.25rem; /* 36 */ --text-5xl: 3rem; /* 48 */ --text-6xl: 3.75rem; /* 60 */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; /* Shadows — shadcn standard ramp */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10); --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10); --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10); --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10); --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; color-scheme: light; } /* ============================================================ Dark theme ============================================================ */ .dark { --background: 240 10% 3.9%; /* zinc-950 */ --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 40 96% 53%; /* same amber */ --primary-foreground: 240 10% 3.9%; --secondary: 240 3.7% 15.9%; /* zinc-800 */ --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --success: 142 71% 35%; --warning: 38 92% 50%; --info: 217 91% 60%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 40 96% 53%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; color-scheme: dark; }