/* © 2025 iPrime | TokensOklchDark.css — Dark theme color tokens (oklch format) */ /* This file defines ALL color-related design tokens for the dark theme. Fixed structural tokens are in TokensFixed.css. Fluid responsive tokens are in TokensFluid.css. Base HTML styles are in Foundation.css. Color Format: oklch(L C H / A) — Modern perceptually uniform color space - L = Lightness (0-100%) - C = Chroma/saturation (0-0.4) - H = Hue (0-360 degrees) - A = Alpha/opacity (optional, 0-100%) Benefits: Predictable lightness, easier color manipulation, wider gamut support. Future: Create TokensLight.css with same variable names but light colors. Token Naming Convention: - Generic colors: --token-color-{purpose}-{variant} - Background colors: --token-bg-{purpose} - Text colors: --token-text-{hierarchy} - Border colors: --token-border-{purpose} - Shadows: --token-shadow-{type}-{variant} */ :root { /* ========================================================================= BRAND COLORS — Primary palette (solid) ========================================================================= */ --token-color-brand-cyan: oklch(79% 0.15 220); --token-color-brand-purple: oklch(45% 0.31 300); --token-color-brand-pink: oklch(55% 0.27 15); --token-color-brand-gold: oklch(84% 0.19 85); --token-color-brand-orange: oklch(77% 0.17 55); --token-color-brand-orange-alt: oklch(68% 0.22 40); --token-color-brand-orange-dark: oklch(67% 0.2 40); /* ========================================================================= STATUS COLORS — System feedback states (solid) ========================================================================= */ --token-color-status-success: oklch(64% 0.17 160); --token-color-status-warning: oklch(84% 0.19 85); --token-color-status-error: oklch(55% 0.28 30); --token-color-status-info: oklch(79% 0.15 220); --token-color-status-neutral: oklch(55% 0.02 260); /* ========================================================================= SEMANTIC COLORS — Contextual meanings (solid) ========================================================================= */ --token-color-danger: oklch(57% 0.26 25); --token-color-danger-light: oklch(65% 0.2 20); --token-color-safe: oklch(64% 0.17 160); --token-color-caution: oklch(73% 0.2 55); /* ========================================================================= BASE COLORS — Absolute values ========================================================================= */ --token-color-white: oklch(100% 0 0); --token-color-black: oklch(8% 0 0); --token-color-transparent: transparent; /* ========================================================================= BACKGROUND COLORS — Layered depth system (by purpose) ========================================================================= */ --token-bg-primary: oklch(8% 0.005 260); /* Darkest - main viewport background */ --token-bg-secondary: oklch(10% 0.005 260); /* Secondary background level */ --token-bg-card: oklch(13% 0.005 260); /* Card/container level */ --token-bg-card-hover: oklch(17% 0.025 50); /* Card hover state */ --token-bg-surface: oklch(9% 0 0); /* Component surface */ --token-bg-elevated: oklch(15% 0 0); /* Elevated elements */ --token-bg-item: oklch(15% 0 0); /* List items, tiles */ --token-bg-item-hover: oklch(17% 0.025 50); /* Item hover state */ --token-bg-item-active: oklch(20% 0.03 50); /* Active/pressed state */ --token-bg-input: oklch(15% 0 0); /* Input field backgrounds */ --token-bg-button-primary: oklch(77% 0.17 55); /* Primary button background */ --token-bg-button-secondary: oklch(15% 0 0); /* Secondary button background */ --token-bg-button-ghost: transparent; /* Ghost button background */ --token-bg-disabled: oklch(10% 0 0); /* Disabled elements */ --token-bg-overlay: oklch(0% 0 0 / 60%); /* Dark overlay */ --token-bg-overlay-darker: oklch(0% 0 0 / 80%); /* Darker overlay for modals */ --token-bg-overlay-light: oklch(100% 0 0 / 5%); /* Light overlay */ --token-bg-danger-hover: oklch(57% 0.26 25 / 15%); /* Danger hover state */ /* Status background colors for badges/alerts */ --token-bg-badge-success: oklch(64% 0.17 160 / 15%); /* Success badge bg */ --token-bg-badge-warning: oklch(84% 0.19 85 / 15%); /* Warning badge bg */ --token-bg-badge-error: oklch(55% 0.28 30 / 15%); /* Error badge bg */ --token-bg-badge-info: oklch(79% 0.15 220 / 15%); /* Info badge bg */ --token-bg-alert-success: oklch(64% 0.17 160 / 8%); /* Success alert bg */ --token-bg-alert-warning: oklch(84% 0.19 85 / 8%); /* Warning alert bg */ --token-bg-alert-error: oklch(55% 0.28 30 / 8%); /* Error alert bg */ --token-bg-alert-info: oklch(79% 0.15 220 / 8%); /* Info alert bg */ /* ========================================================================= BACKGROUND GRADIENTS — Directional color transitions ========================================================================= */ --token-bg-gradient-header: linear-gradient(135deg, oklch(16% 0.02 50) 0%, oklch(12% 0 0) 100%); --token-bg-gradient-primary: linear-gradient(135deg, oklch(77% 0.17 55) 0%, oklch(68% 0.22 40) 100%); --token-bg-gradient-success: linear-gradient(135deg, oklch(64% 0.17 160) 0%, oklch(55% 0.16 160) 100%); --token-bg-gradient-danger: linear-gradient(135deg, oklch(55% 0.28 30) 0%, oklch(50% 0.24 25) 100%); --token-bg-gradient-cyan-purple: linear-gradient(135deg, oklch(79% 0.15 220) 0%, oklch(45% 0.31 300) 100%); /* ========================================================================= TEXT COLORS — Opacity-based hierarchy (by purpose) ========================================================================= */ --token-text-primary: oklch(100% 0 0 / 95%); /* Primary readable text */ --token-text-secondary: oklch(100% 0 0 / 72%); /* Secondary text */ --token-text-tertiary: oklch(100% 0 0 / 58%); /* Tertiary/subtle text */ --token-text-quaternary: oklch(100% 0 0 / 45%); /* Quaternary text */ --token-text-muted: oklch(100% 0 0 / 40%); /* Muted text */ --token-text-faint: oklch(100% 0 0 / 25%); /* Faint text */ --token-text-placeholder: oklch(100% 0 0 / 32%); /* Input placeholder text */ --token-text-disabled: oklch(100% 0 0 / 28%); /* Disabled element text */ --token-text-inverse: oklch(0% 0 0 / 90%); /* Dark text on light bg */ --token-text-on-brand: oklch(100% 0 0); /* Text on brand colors */ --token-text-on-success: oklch(100% 0 0); /* Text on success bg */ --token-text-on-warning: oklch(13% 0.005 260); /* Text on warning bg */ --token-text-on-error: oklch(100% 0 0); /* Text on error bg */ /* ========================================================================= BORDER COLORS — By purpose ========================================================================= */ /* Generic borders */ --token-border-primary: oklch(100% 0 0 / 10%); --token-border-secondary: oklch(100% 0 0 / 6%); --token-border-tertiary: oklch(100% 0 0 / 3%); --token-border-focus: oklch(77% 0.17 55 / 60%); --token-border-hover: oklch(77% 0.17 55 / 40%); --token-border-disabled: oklch(100% 0 0 / 4%); /* Brand accent borders */ --token-border-cyan: oklch(79% 0.15 220 / 30%); --token-border-purple: oklch(45% 0.31 300 / 30%); --token-border-pink: oklch(55% 0.27 15 / 30%); --token-border-gold: oklch(84% 0.19 85 / 30%); --token-border-orange: oklch(77% 0.17 55 / 40%); /* Status borders */ --token-border-success: oklch(64% 0.17 160 / 40%); --token-border-warning: oklch(84% 0.19 85 / 40%); --token-border-error: oklch(55% 0.28 30 / 40%); --token-border-info: oklch(79% 0.15 220 / 40%); /* Alert borders */ --token-border-alert-success: oklch(64% 0.17 160 / 20%); --token-border-alert-warning: oklch(84% 0.19 85 / 20%); --token-border-alert-error: oklch(55% 0.28 30 / 20%); --token-border-alert-info: oklch(79% 0.15 220 / 20%); /* ========================================================================= SHADOWS — Elevation, Focus, Component-specific ========================================================================= */ /* Inner Shadows (Depth effects) */ --token-shadow-inner-subtle: inset 0 0 3px 0.1px oklch(0% 0 0 / 20%); --token-shadow-inner-default: inset 0 0 5px 0.15px oklch(0% 0 0 / 30%); --token-shadow-inner-strong: inset 0 0 8px 0.2px oklch(0% 0 0 / 40%); /* Inner Shadows (Brand colors) */ --token-shadow-inner-orange: inset 0 0 5px 2.5px oklch(77% 0.17 55 / 30%); --token-shadow-inner-cyan: inset 0 0 5px 2.5px oklch(79% 0.15 220 / 30%); --token-shadow-inner-purple: inset 0 0 5px 2.5px oklch(45% 0.31 300 / 30%); --token-shadow-inner-success: inset 0 0 5px 2.5px oklch(64% 0.17 160 / 30%); --token-shadow-inner-warning: inset 0 0 5px 2.5px oklch(84% 0.19 85 / 30%); --token-shadow-inner-error: inset 0 0 5px 2.5px oklch(55% 0.28 30 / 30%); /* Outer Shadows (Elevation) */ --token-shadow-outer-subtle: 0 0 3px 1px oklch(0% 0 0 / 20%); --token-shadow-outer-default: 0 0 5px 2.5px oklch(0% 0 0 / 30%); --token-shadow-outer-strong: 0 0 8px 3px oklch(0% 0 0 / 40%); /* Outer Shadows (Brand colors) */ --token-shadow-outer-orange: 0 0 5px 2.5px oklch(77% 0.17 55 / 30%); --token-shadow-outer-cyan: 0 0 5px 2.5px oklch(79% 0.15 220 / 30%); --token-shadow-outer-purple: 0 0 5px 2.5px oklch(45% 0.31 300 / 30%); --token-shadow-outer-success: 0 0 5px 2.5px oklch(64% 0.17 160 / 30%); --token-shadow-outer-warning: 0 0 5px 2.5px oklch(84% 0.19 85 / 30%); --token-shadow-outer-error: 0 0 5px 2.5px oklch(55% 0.28 30 / 30%); /* Elevation Shadows (By size) */ --token-shadow-xs: 0 1px 2px 0 oklch(0% 0 0 / 5%); --token-shadow-sm: 0 4px 8px 0 oklch(0% 0 0 / 10%); --token-shadow-md: 0 8px 16px 0 oklch(0% 0 0 / 15%); --token-shadow-lg: 0 12px 24px 0 oklch(0% 0 0 / 20%); --token-shadow-xl: 0 18px 38px 0 oklch(0% 0 0 / 25%); --token-shadow-2xl: 0 25px 50px 0 oklch(0% 0 0 / 35%); --token-shadow-3xl: 0 35px 70px 0 oklch(0% 0 0 / 45%); /* Component-specific Shadows */ --token-shadow-card: 0 18px 38px oklch(0% 0 0 / 48%); --token-shadow-card-hover: 0 24px 48px oklch(0% 0 0 / 60%); --token-shadow-button: 0 12px 24px oklch(77% 0.17 55 / 35%); --token-shadow-button-hover: 0 16px 32px oklch(77% 0.17 55 / 45%); --token-shadow-dropdown: inset 0 0 5px 0.15px oklch(0% 0 0 / 30%), 0 12px 40px oklch(0% 0 0 / 80%); --token-shadow-modal: 0 25px 50px oklch(0% 0 0 / 90%); --token-shadow-focus: 0 0 0 3px oklch(77% 0.17 55 / 40%); --token-shadow-focus-error: 0 0 0 3px oklch(55% 0.28 30 / 15%); --token-shadow-glow-orange: 0 0 12px oklch(77% 0.17 55 / 80%); --token-shadow-glow-cyan: 0 0 12px oklch(79% 0.15 220 / 80%); --token-shadow-glow-gold: 0 0 12px oklch(84% 0.19 85 / 80%); /* ========================================================================= MODULE-SPECIFIC COLOR TOKENS — Navbar ========================================================================= */ --token-navbar-overlay-bg: oklch(0% 0 0 / 80%); --token-navbar-danger-hover-bg: oklch(60% 0.22 25 / 10%); /* ========================================================================= MODULE-SPECIFIC COLOR TOKENS — Modal ========================================================================= */ --token-modal-shadow-red-sm: 0 2px 8px oklch(57% 0.26 25 / 30%); --token-modal-shadow-red-md: 0 4px 12px oklch(57% 0.26 25 / 40%); --token-modal-shadow-blue-sm: 0 2px 8px oklch(60% 0.16 250 / 30%); --token-modal-shadow-blue-md: 0 4px 12px oklch(60% 0.16 250 / 40%); --token-modal-shadow-orange-sm: 0 2px 8px oklch(73% 0.2 55 / 30%); --token-modal-shadow-orange-md: 0 4px 12px oklch(73% 0.2 55 / 40%); } /* ============================================================================= END OF DARK THEME COLOR TOKENS ============================================================================= */