78 lines
4.2 KiB
CSS
78 lines
4.2 KiB
CSS
/* ===================================================================
|
|
DESIGN TOKENS
|
|
===================================================================
|
|
Single source of truth for all design tokens (colors, gradients, shadows, etc.)
|
|
Used by both Tailwind @theme and legacy CSS classes.
|
|
|
|
🔒 DESIGN SYSTEM LOCKED - See DESIGN_SYSTEM.md for complete style guide
|
|
=================================================================== */
|
|
|
|
:root {
|
|
/* ===================================================================
|
|
PRIMARY BRAND COLORS
|
|
=================================================================== */
|
|
--color-primary: #2C7AA1; /* Primary rich blue - main CTA */
|
|
--color-primary-dark: #236082; /* Darkened for hover / active / gradient depth */
|
|
|
|
/* Success Green (teal-aligned) */
|
|
--color-success: #2CA18E; /* Deep teal for success states */
|
|
--color-success-dark: #238272; /* Deeper teal for hover / active */
|
|
|
|
/* Amber / Warning (warm contrast to cool palette) */
|
|
--color-warning: #D9A12C; /* Golden amber for highlight / warning */
|
|
--color-warning-dark: #B8872A; /* Darker amber for hover / strong warning */
|
|
|
|
/* Danger / Destructive */
|
|
--color-danger: #A12C40; /* Deep red aligned with palette */
|
|
--color-danger-dark: #832334; /* Darker red for hover / active */
|
|
|
|
/* Purple (accent for special emphasis) */
|
|
--color-purple: #2C40A1; /* Navy-purple from analogous palette */
|
|
--color-purple-dark: #232F7A; /* Darker navy-purple for hover / active */
|
|
|
|
/* ===================================================================
|
|
BACKGROUND COLORS
|
|
=================================================================== */
|
|
--color-navy: #1A2B3C; /* Sidebar background (charcoal-navy) */
|
|
--color-navy-light: #243A4D; /* Slightly lighter navy, hover/active */
|
|
--color-surface: #F8FAFB; /* Page background (cool gray-white) */
|
|
--color-panel: #FFFFFF; /* Cards / panel foreground */
|
|
--color-panel-alt: #EEF4F7; /* Sub-panel / hover card background (teal-tinted) */
|
|
|
|
/* ===================================================================
|
|
TEXT COLORS
|
|
=================================================================== */
|
|
--color-text: #1A2B3C; /* Main headings/body text (matches navy) */
|
|
--color-text-dim: #5A6B7C; /* Secondary/subtext (mid-gray with blue undertone) */
|
|
--color-text-light: #E8F0F4; /* Text on dark sidebar */
|
|
--color-stroke: #D4E0E8; /* Table/grid borders and dividers (cool-tinted) */
|
|
|
|
/* ===================================================================
|
|
BORDER RADIUS
|
|
=================================================================== */
|
|
--radius-base: 6px;
|
|
|
|
/* ===================================================================
|
|
GRADIENTS
|
|
=================================================================== */
|
|
--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
|
|
--gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
|
|
--gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
|
|
--gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
|
|
--gradient-purple: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
|
|
--gradient-panel: linear-gradient(180deg, var(--color-panel) 0%, var(--color-panel-alt) 100%);
|
|
}
|
|
|
|
/* ===================================================================
|
|
DARK MODE OVERRIDES
|
|
=================================================================== */
|
|
.dark {
|
|
--color-surface: #1A2B3C; /* Charcoal navy (matches --color-navy) */
|
|
--color-panel: #243A4D; /* Slightly lighter navy for cards */
|
|
--color-panel-alt: #142230; /* Deeper navy for nested panels */
|
|
--color-text: #E8F0F4; /* Cool off-white (matches --color-text-light) */
|
|
--color-text-dim: #8A9BAC; /* Muted blue-gray for secondary text */
|
|
--color-stroke: #2E4A5E; /* Blue-tinted border color */
|
|
}
|
|
|