:root{ --primary:#D68560; --primary-foreground:#FFFFFF; --secondary:#FFFFFF; --secondary-foreground:#2A89B3; --muted:210 40% 96.1%; --accent:#D68560; --accent-foreground:#FFFFFF; --destructive:0 72% 51%; --destructive-foreground:210 40% 98%; --input:214.3 31.8% 91.4%; --ring:221.2 83.2% 53.3%; /* PRIMARY COLORS */ --primary-main:#08233E; --primary-light:#2A89B3; --primary-accent:#D68560; --primary-black:#00040E; --primary-white:#FFFFFF; /* SECONDARY COLORS */ --secondary-1-1:#352841; --secondary-1-2:#844D5D; --secondary-1-3:#C98794; --secondary-1-4:#EEDBDD; --secondary-2-1:#064552; --secondary-2-2:#42939A; --secondary-2-3:#5CB8C0; --secondary-2-4:#CDE6E7; --secondary-3:#AAD0E1; --secondary-4:#D5EBF5; --secondary-link:#1977F3; /* STATE COLORS */ --state-positive:#01B866; --state-positive-light:#E3FAF0; --state-negative:#F13F3F; --state-negative-light:#F8E9E9; --state-attention:#E47600; --state-attention-light:#FDF2E6; /* PILL COLORS */ --pills-1-light:#CDE6E7; --pills-1-dark:#1D7880; --pills-2-light:#D6C7E8; --pills-2-dark:#51456A; --pills-3-light:#BAD4FC; --pills-3-dark:#0464FA; --pills-4-light:#E7D2D8; --pills-4-dark:#844D5D; --pills-5-light:#BBDCEB; --pills-5-dark:#2A89B3; --pills-6-light:#CDD7E2; --pills-6-dark:#5A7796; --pills-7-light:#D6C7E8; --pills-7-dark:#8C4BE1; --pills-8-light:#ECD8CF; --pills-8-dark:#BD7351; /* GRAY COLORS */ --grays-background:#F3F3F3; --grays-background-dark:#E7E7E7; --grays-border:#CED3D8; --grays-border-active:#CFEAF3; --grays-text:#9BA7B6; --grays-body:#7C8998; --grays-light:#EEF0F4; /* Tailwind v4 optional tokens (accept raw OKLCH) */ /* --color-primary:#08233E; */ /* --color-secondary:210 40% 96.1%; */ } /* Optional: dark mode overrides (if you toggle .dark on ) */ .dark{ --background:222.2 84% 4.9%; --foreground:210 40% 98%; --primary:210 100% 60%; --primary-foreground:222.2 47.4% 11.2%; --secondary:215 28% 17%; --secondary-foreground:210 40% 98%; --muted:215 28% 17%; --accent:48 96% 53%; --accent-foreground:222.2 47.4% 11.2%; --destructive:0 72% 51%; --destructive-foreground:210 40% 98%; --border:215 27.9% 16.9%; --input:215 27.9% 16.9%; --ring:210 100% 60%; }