/* DRi Dashboard Design System — HSL tokens (never hardcode hex in components). */ :root { --background: 0 0% 100%; --foreground: 0 0% 0%; --card: 0 0% 100%; --card-foreground: 0 0% 0%; --primary: 190 100% 50%; /* DRi Cyan #00C8FF */ --primary-foreground: 0 0% 100%; --secondary: 0 0% 96%; --secondary-foreground: 0 0% 0%; --muted: 0 0% 96%; --muted-foreground: 0 0% 40%; --accent: 190 100% 50%; --accent-foreground: 0 0% 100%; --border: 0 0% 90%; --input: 0 0% 90%; --ring: 190 100% 50%; --surface-dark: 0 0% 0%; --surface-dark-foreground: 0 0% 100%; --destructive: 0 84% 60%; --success: 142 71% 45%; --warning: 38 92% 50%; --info: 190 100% 50%; --radius: 0.5rem; /* DRi X signature gradient — AI/intelligence surfaces only. */ --gradient-drix: linear-gradient(110deg, hsl(190 100% 50%), hsl(221 100% 56%), hsl(313 100% 56%), hsl(28 100% 55%), hsl(48 100% 58%)); /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-hover: 200ms; --dur-enter: 400ms; --dur-page: 600ms; /* Elevation (kept extremely soft — Apple-minimal) */ --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.04); --shadow-md: 0 12px 30px -16px hsl(0 0% 0% / 0.18); --shadow-glow: 0 0 0 4px hsl(var(--ring) / 0.12); --sidebar-w: 264px; --sidebar-w-collapsed: 76px; } .dark { --background: 0 0% 0%; --foreground: 0 0% 100%; --card: 0 0% 4%; --card-foreground: 0 0% 100%; --secondary: 0 0% 10%; --secondary-foreground: 0 0% 100%; --muted: 0 0% 10%; --muted-foreground: 0 0% 65%; --border: 0 0% 15%; --input: 0 0% 15%; --primary: 190 100% 50%; --shadow-md: 0 18px 40px -18px hsl(0 0% 0% / 0.7); } /* One accent per screen — set on . Default = cyan. */ body[data-accent="amber"] { --primary: 38 92% 50%; --accent: 38 92% 50%; --ring: 38 92% 50%; } body[data-accent="green"] { --primary: 142 71% 45%; --accent: 142 71% 45%; --ring: 142 71% 45%; } body[data-accent="violet"] { --primary: 262 83% 63%; --accent: 262 83% 63%; --ring: 262 83% 63%; } /* drix keeps cyan primary; the gradient is applied to specific panels only. */