/* ============================================================ DEVIS · COLOR TOKENS A confident, modern-SaaS palette: a vivid INDIGO primary, a VIOLET accent for the AI / brand moments, one GREEN for positive states, clean near-neutral GREYS, and red reserved for errors. All values in oklch for perceptual consistency. Scale names (blue / violet / green / neutral …) describe the ROLE; the legacy aliases at the bottom keep older component code (--fjord / --pine / --frost / --sky / --lingon) working so nothing breaks across the rebrand. ============================================================ */ :root { /* ---- Blue · Indigo (primary) — anchored to the logo gradient ---- 500 = #4571F4 (bright stop) · 700 = #2A45C9 (deep stop) · 600 = primary */ --blue-50: oklch(0.972 0.016 264); --blue-100: oklch(0.942 0.038 264); --blue-200: oklch(0.890 0.070 264); --blue-300: oklch(0.810 0.110 264); --blue-400: oklch(0.700 0.160 264); --blue-500: oklch(0.585 0.195 264); /* ≈ #4571F4 (logo bright stop) */ --blue-600: oklch(0.520 0.200 265); /* PRIMARY (logo mid) */ --blue-700: oklch(0.445 0.185 266); /* ≈ #2A45C9 (logo deep stop / hover) */ --blue-800: oklch(0.378 0.155 267); --blue-900: oklch(0.312 0.120 268); /* deep brand surfaces */ --blue-950: oklch(0.232 0.082 270); /* ---- Violet (the expressive accent) — anchored to the mark's “total” band ---- 400 = #A98BFB (the band) · 500 = solid accent-emphasis */ --violet-50: oklch(0.969 0.020 298); --violet-100: oklch(0.938 0.044 298); --violet-200: oklch(0.886 0.082 297); --violet-300: oklch(0.772 0.135 296); --violet-400: oklch(0.705 0.155 296); /* ≈ #A98BFB (mark band) */ --violet-500: oklch(0.620 0.205 295); /* accent */ --violet-600: oklch(0.555 0.225 294); --violet-700: oklch(0.478 0.200 295); --violet-800: oklch(0.398 0.165 296); --violet-900: oklch(0.330 0.128 297); /* ---- Green & Red are intentionally NOT in this palette ---- The brand is blue + violet + neutral only. Positive / “won” uses violet, informational / “sent” uses periwinkle (Sky), and closed / negative / destructive states use ink (deep neutral). No green, no red — anywhere. */ /* ---- Neutral (warm-tinted greys — a whisper of lilac to tie to the violet) ---- */ --neutral-0: oklch(1 0 0); /* pure white */ --neutral-25: oklch(0.992 0.0015 288); /* app canvas */ --neutral-50: oklch(0.983 0.003 288); --neutral-100: oklch(0.964 0.004 288); --neutral-200: oklch(0.925 0.005 288); /* hairline borders */ --neutral-300: oklch(0.873 0.007 288); --neutral-400: oklch(0.712 0.010 288); --neutral-500: oklch(0.566 0.013 287); /* muted text */ --neutral-600: oklch(0.472 0.014 287); --neutral-700: oklch(0.378 0.014 287); --neutral-800: oklch(0.282 0.013 288); --neutral-900: oklch(0.208 0.012 289); /* foreground / ink */ --neutral-950: oklch(0.146 0.010 290); /* ---- Functional hue (info only — no red, no green) ---- */ /* Sky — info / “sent” (a warm periwinkle bridging blue → violet) */ --sky-50: oklch(0.968 0.020 272); --sky-100: oklch(0.930 0.044 272); --sky-500: oklch(0.648 0.142 272); --sky-600: oklch(0.582 0.156 272); --sky-700: oklch(0.496 0.140 273); /* ============================================================ LEGACY SCALE ALIASES Older component CSS still references --fjord / --pine / --frost / --lingon. They now resolve to the Devis palette, so existing components inherit the rebrand automatically. ============================================================ */ --fjord-50: var(--blue-50); --fjord-100: var(--blue-100); --fjord-200: var(--blue-200); --fjord-300: var(--blue-300); --fjord-400: var(--blue-400); --fjord-500: var(--blue-500); --fjord-600: var(--blue-600); --fjord-700: var(--blue-700); --fjord-800: var(--blue-800); --fjord-900: var(--blue-900); --fjord-950: var(--blue-950); /* legacy green (--pine) now resolves to VIOLET — no green renders anywhere */ --pine-50: var(--violet-50); --pine-100: var(--violet-100); --pine-200: var(--violet-200); --pine-300: var(--violet-300); --pine-400: var(--violet-400); --pine-500: var(--violet-500); --pine-600: var(--violet-600); --pine-700: var(--violet-700); --pine-800: var(--violet-800); --pine-900: var(--violet-900); --frost-0: var(--neutral-0); --frost-25: var(--neutral-25); --frost-50: var(--neutral-50); --frost-100: var(--neutral-100); --frost-200: var(--neutral-200); --frost-300: var(--neutral-300); --frost-400: var(--neutral-400); --frost-500: var(--neutral-500); --frost-600: var(--neutral-600); --frost-700: var(--neutral-700); --frost-800: var(--neutral-800); --frost-900: var(--neutral-900); --frost-950: var(--neutral-950); /* legacy red (--lingon) now resolves to INK (deep neutral) — no red renders anywhere */ --lingon-50: var(--neutral-100); --lingon-100: var(--neutral-200); --lingon-500: var(--neutral-800); --lingon-600: var(--neutral-900); --lingon-700: var(--neutral-900); /* ============================================================ SEMANTIC ALIASES Maps the palette onto shadcn-style names used across the app. ============================================================ */ --background: var(--neutral-25); --foreground: var(--neutral-900); --surface-card: var(--neutral-0); --card: var(--neutral-0); --card-foreground: var(--neutral-900); --surface-sunken: var(--neutral-50); /* table heads, wells */ --surface-rail: var(--neutral-50); /* sidebar */ --popover: var(--neutral-0); --popover-foreground: var(--neutral-900); --primary: var(--blue-600); --primary-foreground: oklch(0.99 0 0); --primary-hover: var(--blue-700); --accent-emphasis: var(--violet-500); /* the expressive accent — violet */ --accent: var(--neutral-100); --accent-foreground: var(--neutral-800); --secondary: var(--neutral-100); --secondary-foreground: var(--neutral-800); --muted: var(--neutral-100); --muted-foreground: var(--neutral-500); --text-strong: var(--neutral-900); --text-body: var(--neutral-800); --text-muted: var(--neutral-500); --text-onfill: oklch(0.99 0 0); --destructive: var(--neutral-800); /* destructive / error — ink, no red */ --destructive-foreground: oklch(0.99 0 0); --success: var(--violet-600); /* positive / won — violet, no green */ --info: var(--sky-600); --caution: var(--neutral-700); /* low-stock flag — quiet ink, no red */ --border: var(--neutral-200); --border-strong: var(--neutral-300); --input: var(--neutral-200); --ring: var(--blue-600); /* convenience brand roles (prefer these in new work) */ --brand: var(--blue-600); --brand-accent: var(--violet-500); /* exact logo / mark colours — use for the brand gradient & band */ --brand-grad-from: #4571F4; /* mark gradient, bright stop */ --brand-grad-to: #2A45C9; /* mark gradient, deep stop */ --brand-band: #A98BFB; /* the violet “total” band */ --brand-gradient: linear-gradient(135deg, #4571F4, #2A45C9); /* @kind color */ /* discount-tier accents (A best → D none) — a brand violet→indigo→periwinkle→grey ramp */ --tier-a: var(--violet-500); /* premium violet */ --tier-b: var(--blue-600); /* indigo */ --tier-c: var(--sky-500); /* periwinkle */ --tier-d: var(--neutral-400); /* grey */ }