/* ───────────────────────────────────────────────────────────────────────────── Zypp · Color tokens — "Claude-warm" theme Philosophy: warm cream canvas, terracotta accent, restrained motion. Channel format: every color is stored as bare HSL channels (`H S% L%`) and consumed as `hsl(var(--token))` — the shadcn/ui convention the production app uses, so a token can take an alpha modifier inline: `hsl(var(--primary) / 0.1)`. Hex equivalents in the leading comments. ───────────────────────────────────────────────────────────────────────────── */ :root { /* ── Surfaces ───────────────────────────────────────────── */ /* #FAF9F5 warm cream — page canvas */ --background: 48 33% 97%; /* @kind color */ /* #211F1C deep warm ink — primary text */ --foreground: 30 8% 12%; /* @kind color */ /* #FFFFFF — cards sit bright on the cream */ --card: 0 0% 100%; /* @kind color */ --card-foreground: 30 8% 12%; /* @kind color */ --popover: 0 0% 100%; /* @kind color */ --popover-foreground: 30 8% 12%; /* @kind color */ /* ── Brand — terracotta ─────────────────────────────────── */ /* #B45A3C terracotta — darkened to clear WCAG AA (≈5.5:1) on cream */ --primary: 15 55% 45%; /* @kind color */ --primary-foreground: 48 33% 97%; /* @kind color */ /* #D98A6E lighter terracotta — glows, dark-mode primary */ --primary-glow: 15 65% 62%; /* @kind color */ /* accent shares the terracotta family (success-style CTAs reuse it) */ --accent: 15 55% 45%; /* @kind color */ --accent-foreground: 48 33% 97%; /* @kind color */ /* ── Neutrals ───────────────────────────────────────────── */ /* #ECE8DF warm sand — quiet fills */ --secondary: 44 24% 92%; /* @kind color */ --secondary-foreground: 30 8% 12%; /* @kind color */ /* #F0EDE6 — muted surface */ --muted: 44 22% 94%; /* @kind color */ /* #5C5852 — secondary text (AA on cream) */ --muted-foreground: 30 5% 34%; /* @kind color */ /* #E2DDD4 — hairlines, dividers */ --border: 40 15% 86%; /* @kind color */ --input: 40 15% 86%; /* @kind color */ --ring: 15 55% 52%; /* @kind color */ /* ── Semantic ───────────────────────────────────────────── */ /* #C92A2A error */ --destructive: 0 72% 45%; /* @kind color */ --destructive-foreground: 0 0% 100%; /* @kind color */ /* #348B62 success / live */ --success: 152 45% 38%; /* @kind color */ --success-foreground: 0 0% 100%; /* @kind color */ /* #D4810F warning */ --warning: 32 85% 45%; /* @kind color */ --warning-foreground: 0 0% 100%; /* @kind color */ /* ── Sidebar (dashboard chrome) ─────────────────────────── */ --sidebar-background: 48 33% 97%; /* @kind color */ --sidebar-foreground: 30 8% 12%; /* @kind color */ --sidebar-primary: 15 55% 45%; /* @kind color */ --sidebar-primary-foreground: 48 33% 97%; /* @kind color */ --sidebar-accent: 44 22% 94%; /* @kind color */ --sidebar-accent-foreground: 30 8% 12%; /* @kind color */ --sidebar-border: 40 15% 86%; /* @kind color */ --sidebar-ring: 15 55% 52%; /* @kind color */ /* ── Gradients ──────────────────────────────────────────── */ --gradient-primary: linear-gradient(hsl(15 55% 45%), hsl(15 55% 45%)); /* @kind other */ --gradient-soft: hsl(44 24% 92%); /* @kind other */ --gradient-warm: transparent; /* @kind other */ } /* ── Dark theme — toggle by adding `.dark` to ──────── */ .dark { /* #15140F warm near-black */ --background: 60 4% 8%; /* @kind color */ /* #F4F1E9 warm off-white */ --foreground: 48 20% 95%; /* @kind color */ --card: 48 4% 11%; /* @kind color */ --card-foreground: 48 20% 95%; /* @kind color */ --popover: 48 4% 11%; /* @kind color */ --popover-foreground: 48 20% 95%; /* @kind color */ /* lifted terracotta reads on dark */ --primary: 15 65% 62%; /* @kind color */ --primary-foreground: 30 8% 10%; /* @kind color */ --primary-glow: 15 65% 62%; /* @kind color */ --accent: 15 65% 62%; /* @kind color */ --accent-foreground: 30 8% 10%; /* @kind color */ --secondary: 48 4% 14%; /* @kind color */ --secondary-foreground: 48 20% 95%; /* @kind color */ --muted: 48 4% 14%; /* @kind color */ --muted-foreground: 48 6% 72%; /* @kind color */ --border: 48 4% 18%; /* @kind color */ --input: 48 4% 18%; /* @kind color */ --ring: 15 65% 62%; /* @kind color */ --destructive: 0 62% 52%; /* @kind color */ --destructive-foreground: 48 20% 95%; /* @kind color */ --success: 152 45% 48%; /* @kind color */ --success-foreground: 0 0% 100%; /* @kind color */ --warning: 32 85% 55%; /* @kind color */ --warning-foreground: 0 0% 100%; /* @kind color */ --sidebar-background: 60 4% 8%; /* @kind color */ --sidebar-foreground: 48 20% 95%; /* @kind color */ --sidebar-primary: 15 65% 62%; /* @kind color */ --sidebar-primary-foreground: 30 8% 10%; /* @kind color */ --sidebar-accent: 48 4% 14%; /* @kind color */ --sidebar-accent-foreground: 48 20% 95%; /* @kind color */ --sidebar-border: 48 4% 18%; /* @kind color */ --sidebar-ring: 15 65% 62%; /* @kind color */ --gradient-primary: linear-gradient(hsl(15 65% 62%), hsl(15 65% 62%)); /* @kind other */ --gradient-soft: hsl(48 4% 12%); /* @kind other */ --gradient-warm: transparent; /* @kind other */ }