/* |---------------------------------------------------------------------------- | GLOBAL CSS VARIABLES & THEME ENGINE |--------------------------------------------------------------------------- | DESCRIPTION: | Defines the basic design variables for the whole system. | 1. Supports Dark & ​​Light Mode automatically (via media query). | 2. Uses HSL values ​​for dynamic color theme switching. | 3. Contains no styles (margin, padding), only color definitions. |-------------------------------------------------------------------------- */ :root { /* |-------------------------------------------------- | BRAND IDENTITY (THMING) |-------------------------------------------------- | Changing --primary-hue changes the entire Dashboard color. | 210 = Nexus Blue (Default) | 260 = Royal Purple | 150 = Success Green | 340 = Alert Red */ --primary-hue: 220; --primary-sat: 90%; /* Dynamic Colors based on Hue */ --color-primary: hsl(var(--primary-hue), var(--primary-sat), 56%); --color-primary-hover: hsl(var(--primary-hue), var(--primary-sat), 46%); --color-primary-faint: hsl(var(--primary-hue), var(--primary-sat), 96%); /* Για backgrounds */ /* |-------------------------------------------------- | NEUTRAL PALETTE (Slate/Gray) |-------------------------------------------------- */ --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; --gray-950: #020617; /* |-------------------------------------------------- | STATE COLORS (Success, Error, Warning) |-------------------------------------------------- */ --color-success: #10b981; --color-warning: #f59e0b; --color-danger: #ef4444; --color-info: #3b82f6; /* |-------------------------------------------------- | GLOBAL SETTINGS (Radius, Shadows) |-------------------------------------------------- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 9999px; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); --font-main: 'Inter', system-ui, -apple-system, sans-serif; } /* |-------------------------------------------------- | LIGHT MODE (DEFAULT) |-------------------------------------------------- */ :root { --bg-body: var(--gray-50); --bg-card: #ffffff; --bg-input: #ffffff; --text-main: var(--gray-900); --text-muted: var(--gray-500); --border-color: var(--gray-200); } /* |-------------------------------------------------- | DARK MODE (AUTO & MANUAL SUPPORT) |-------------------------------------------------- | Automatically activated if the user's OS is Dark, | or if the .dark class is added to the tag. */ @media (prefers-color-scheme: dark) { :root { --bg-body: var(--gray-950); --bg-card: var(--gray-900); --bg-input: var(--gray-800); --text-main: var(--gray-100); --text-muted: var(--gray-400); --border-color: var(--gray-800); /* Dark mode adjustments for primary color */ --color-primary-faint: hsl(var(--primary-hue), var(--primary-sat), 15%); } } /* Explicit Dark Mode Class Override (For Toggle Button) */html.dark { --bg-body: var(--gray-950); --bg-card: var(--gray-900); --bg-input: var(--gray-800); --text-main: var(--gray-100); --text-muted: var(--gray-400); --border-color: var(--gray-800); --color-primary-faint: hsl(var(--primary-hue), var(--primary-sat), 15%); }