/* ============================================================= COLOR SYSTEM TOKENS (Dark Default + Light Variant) ------------------------------------------------- Goals: 1. Reduce blue saturation overload – blue reserved for actions, links, key brand moments. 2. Deepen dark surfaces to create contrast headroom for subtle elevation + accent pops. 3. Introduce semantic layer so raw hex codes get deprecated & replaced gradually. 4. Provide parallel light theme to enable optional user preference toggle. 5. Backward compatibility bridge: legacy variables (e.g. --primary-color) map to new tokens. Usage Strategy: - Author new components ONLY with semantic tokens (e.g. var(--color-text-primary)). - During migration, progressively replace raw hex occurrences with semantic tokens. - After migration, remove the legacy bridge section. Accessibility Targets (WCAG AA contrast pairs - dark): Text Primary (#D8E4EC) on Surface Base (#16212B): 6.8:1 Action Primary (gradient B5→B4) over Button FG (#FFFFFF): >= 4.5:1 interior contrast and > 3:1 against surrounding surfaces. Gold Accent (#E9AC22) over Surface Base (#16212B): 4.2:1 (meets large text / icon usage; for body text use lighter G2/G1 if needed) THEME ATTRIBUTE: (default) | ============================================================= */ /* ---------- Base Reset (leave minimal here; main resets live elsewhere) ---------- */ :root { /* Dark is default through data-theme attribute; keep minimal fallbacks if attribute missing */ color-scheme: dark light; } /* ===================== DARK THEME (DEFAULT) ===================== */ [data-theme="dark"] { /* Neutrals / Surfaces (progressively lighter upward) */ --color-bg-canvas: #070C11; /* Deep canvas (darker than prior #111827) */ --color-bg-backdrop: #0E141B; /* Backdrop behind modals */ --color-bg-base: #16212B; /* Primary working surface */ --color-bg-raised: #1D2A36; /* Cards / sections */ --color-bg-pop: #243240; /* Popovers / menus */ --color-bg-hover: #2D3D4D; /* Hover elevation */ --color-bg-inset: #101A22; /* Inputs inset */ /* Borders */ --color-border-subtle: #2A3945; --color-border-strong: #3F5666; --color-border-accent: #2E80F6; /* For focused interactive outlines */ /* Text */ --color-text-primary: #D8E4EC; --color-text-secondary: #A8BAC6; --color-text-muted: #6B8291; --color-text-inverse: #070C11; --color-text-on-brand: #FFFFFF; /* Brand Blue Scale (compressed / unified) */ --brand-blue-100: #B3DAFF; --brand-blue-200: #84C1FF; --brand-blue-300: #559DFA; --brand-blue-400: #2E80F6; /* Primary */ --brand-blue-500: #1F63D4; /* Hover / Deep primary */ --brand-blue-600: #1548A5; /* Pressed / Active */ --brand-blue-focus: #1C6DFF; /* High visibility ring */ /* Gold (Value Accent) */ --gold-100: #FFF4D1; --gold-200: #FDE19A; --gold-300: #F9C656; --gold-400: #E9AC22; /* Primary accent */ --gold-500: #C98315; /* Hover */ --gold-600: #8A580C; /* Deep */ /* Success / Status Greens */ --green-100: #D2F8E9; --green-300: #5FE2B8; --green-400: #25C999; /* Base success */ --green-500: #099A73; /* Hover */ --green-600: #03624A; /* Deep */ /* Danger Reds */ --red-100: #FCD7D7; --red-300: #F27070; --red-400: #E13F3F; /* Base danger */ --red-500: #B32424; /* Hover */ --red-600: #7A1616; /* Deep */ /* Warning / Amber */ --amber-100: #FFECC4; --amber-300: #FFB752; --amber-400: #E4891E; --amber-500: #B96212; /* Info / Cyan (optional) */ --cyan-100: #D9F7FE; --cyan-300: #6ED9F3; --cyan-400: #27B9E3; --cyan-500: #1586A8; /* Utility / Overlays */ --overlay-scrim-1: rgba(0,0,0,0.35); --overlay-scrim-2: rgba(0,0,0,0.55); --overlay-scrim-3: rgba(0,0,0,0.72); /* Gradient Tokens */ --grad-brand: linear-gradient(135deg,var(--brand-blue-500) 0%,var(--brand-blue-400) 100%); --grad-brand-hover: linear-gradient(135deg,var(--brand-blue-600) 0%,var(--brand-blue-400) 100%); --grad-gold: linear-gradient(135deg,var(--gold-400) 0%,var(--gold-500) 100%); --grad-success: linear-gradient(135deg,var(--green-400) 0%,var(--green-500) 100%); --grad-hero: radial-gradient(circle at 30% 35%, var(--brand-blue-500) 0%, var(--brand-blue-600) 42%, var(--color-bg-canvas) 85%); /* Optional alt (legacy purple) hero gradient */ --grad-hero-alt: linear-gradient(135deg,#667EEA 0%,#764BA2 100%); /* Experimental innovation accent ramp */ --innovation-300: #8EA2FF; --innovation-400: #667EEA; --innovation-500: #5A46B5; --innovation-600: #4A378F; /* Action / Component Semantics */ --action-primary-bg: var(--grad-brand); --action-primary-bg-hover: var(--grad-brand-hover); --action-primary-fg: var(--color-text-on-brand); --action-outline-border: var(--color-border-accent); --accent-gold: var(--gold-400); --accent-gold-hover: var(--gold-500); --status-success: var(--green-400); --status-danger: var(--red-400); --status-warning: var(--amber-400); --status-info: var(--cyan-400); /* Focus */ --focus-ring: var(--brand-blue-focus); --focus-ring-glow: rgba(28,109,255,0.35); /* Loader / overlay enhancement tokens */ --loader-glow-blue: rgba(46,128,246,0.35); --loader-glow-green: rgba(37,201,153,0.28); --sheen-white-soft: rgba(255,255,255,0.12); --sheen-white-strong: rgba(255,255,255,0.22); /* Shadows (placeholder tokens) */ --shadow-elev-1: 0 1px 2px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,0.02); --shadow-elev-2: 0 4px 10px -2px rgba(0,0,0,.55),0 2px 4px -1px rgba(0,0,0,.4); --shadow-focus: 0 0 0 2px var(--color-bg-base),0 0 0 4px var(--focus-ring),0 0 0 8px var(--focus-ring-glow); } /* ===================== LIGHT THEME (OPT-IN) ===================== */ [data-theme="light"] { color-scheme: light dark; --color-bg-canvas: #F5F8FA; --color-bg-backdrop: #EFF3F6; --color-bg-base: #FFFFFF; --color-bg-raised: #FFFFFF; --color-bg-pop: #FFFFFF; --color-bg-hover: #F1F5F9; --color-bg-inset: #EEF3F6; --color-border-subtle: #D7E2EA; --color-border-strong: #B3C2CC; --color-border-accent: #2E80F6; --color-text-primary: #1C2730; --color-text-secondary: #35424C; --color-text-muted: #5B6B76; --color-text-inverse: #FFFFFF; --color-text-on-brand: #FFFFFF; /* Reuse brand & accent hues (unchanged) */ --brand-blue-100: #E7F4FF; --brand-blue-200: #B3DAFF; --brand-blue-300: #559DFA; --brand-blue-400: #2E80F6; --brand-blue-500: #1F63D4; --brand-blue-600: #1548A5; --brand-blue-focus: #1C6DFF; --gold-100: #FFF4D1; --gold-200: #FDE19A; --gold-300: #F9C656; --gold-400: #E9AC22; --gold-500: #C98315; --gold-600: #8A580C; --green-100: #D2F8E9; --green-300: #5FE2B8; --green-400: #25C999; --green-500: #099A73; --green-600: #03624A; --red-100: #FCD7D7; --red-300: #F27070; --red-400: #E13F3F; --red-500: #B32424; --red-600: #7A1616; --amber-100: #FFECC4; --amber-300: #FFB752; --amber-400: #E4891E; --amber-500: #B96212; --cyan-100: #D9F7FE; --cyan-300: #6ED9F3; --cyan-400: #27B9E3; --cyan-500: #1586A8; --overlay-scrim-1: rgba(0,0,0,0.15); --overlay-scrim-2: rgba(0,0,0,0.35); --overlay-scrim-3: rgba(0,0,0,0.55); --grad-brand: linear-gradient(135deg,var(--brand-blue-400) 0%,var(--brand-blue-300) 100%); --grad-brand-hover: linear-gradient(135deg,var(--brand-blue-500) 0%,var(--brand-blue-300) 100%); --grad-gold: linear-gradient(135deg,var(--gold-400) 0%,var(--gold-500) 100%); --grad-success: linear-gradient(135deg,var(--green-400) 0%,var(--green-500) 100%); --grad-hero: radial-gradient(circle at 30% 35%, var(--brand-blue-200) 0%, var(--brand-blue-400) 55%, var(--color-bg-base) 90%); --grad-hero-alt: linear-gradient(135deg,#8EA2FF 0%,#667EEA 100%); --innovation-300: #B9C6FF; --innovation-400: #8EA2FF; --innovation-500: #667EEA; --innovation-600: #4F55C4; --action-primary-bg: var(--grad-brand); --action-primary-bg-hover: var(--grad-brand-hover); --action-primary-fg: var(--color-text-on-brand); --action-outline-border: var(--color-border-accent); --accent-gold: var(--gold-400); --accent-gold-hover: var(--gold-500); --status-success: var(--green-400); --status-danger: var(--red-400); --status-warning: var(--amber-400); --status-info: var(--cyan-400); --focus-ring: var(--brand-blue-focus); --focus-ring-glow: rgba(28,109,255,0.35); --loader-glow-blue: rgba(46,128,246,0.30); --loader-glow-green: rgba(37,201,153,0.24); --sheen-white-soft: rgba(255,255,255,0.28); --sheen-white-strong: rgba(255,255,255,0.42); --shadow-elev-1: 0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,0.04); --shadow-elev-2: 0 4px 12px -2px rgba(0,0,0,.16),0 2px 4px -1px rgba(0,0,0,.08); --shadow-focus: 0 0 0 2px var(--color-bg-base),0 0 0 4px var(--focus-ring),0 0 0 8px var(--focus-ring-glow); } /* ===================== LEGACY VARIABLE BRIDGE ===================== */ /* Map old project-level variables to new semantic tokens (temporary) */ [data-theme="dark"], [data-theme="light"] { /* Old naming (still referenced in existing CSS) */ --primary-color: var(--brand-blue-400); --primary-dark: var(--brand-blue-500); --secondary-color: var(--green-400); --text-color: var(--color-text-primary); --text-light: var(--color-text-muted); --bg-primary: var(--color-bg-base); --bg-secondary: var(--color-bg-raised); --bg-card: var(--color-bg-pop); --gradient-primary: var(--grad-brand); --gradient-hero: var(--grad-hero); --gradient-hero-alt: var(--grad-hero-alt); /* Premium / Gold Accent Ramp (executive upsell) */ --premium-gold-100: #FFF4D1; --premium-gold-200: #F9E2A2; --premium-gold-300: #F6CD6A; /* soft accent */ --premium-gold-400: #E9AC22; /* primary gold */ --premium-gold-500: #C98315; /* hover / deep */ --premium-gold-600: #8A580C; /* pressed */ --grad-premium: linear-gradient(135deg,var(--premium-gold-400) 0%,var(--premium-gold-500) 100%); --premium-ring: color-mix(in srgb,var(--premium-gold-400) 65%, white 15%); --premium-shadow: 0 0 0 1px rgba(255,255,255,0.06),0 4px 18px -4px rgba(233,172,34,0.45),0 8px 34px -10px rgba(201,131,21,0.4); /* Secondary (Operational Success) Alias Mapping */ --secondary-300: var(--green-300); --secondary-400: var(--green-400); --secondary-500: var(--green-500); --secondary-600: var(--green-600); --grad-secondary: linear-gradient(135deg,var(--secondary-400) 0%,var(--secondary-500) 100%); } /* ===================== MIGRATION NOTES ===================== */ /* Raw → Semantic Mapping (partial exemplar list): #3b82f6 / #2563eb / #1d4ed8 / #1e40af → var(--brand-blue-400 / 500 / 600) #60a5fa / #559dfa → var(--brand-blue-300) #10b981 / #059669 / #047857 → var(--green-400 / 500 / 600) #fbbf24 / #f59e0b / #d97706 → var(--gold-300 / 400 / 500) (some oranges consolidate into gold ramp) #dc2626 / #ef4444 / #f87171 / #b91c1c → var(--red-400 / 400 (lighter contexts) / red-300 / red-500) #111827 / #1f2937 / #374151 → var(--color-bg-base / bg-raised / bg-pop) #e5e7eb / #f1f5f9 / #f3f4f6 → var(--color-text-inverse) OR light theme surfaces depending on context (evaluate contrast) #9ca3af → var(--color-text-muted) #6b7280 → var(--color-text-muted) (legacy – now unify into one scale) #06b6d4 → var(--cyan-400) #a855f7 / #7c3aed → (NOT in core system; consider future "innovation" accent or remove) Deprecate multi-stop “rainbow” gradients (nuclear) → replace with focused brand, gold, success gradients. Refactor Order Recommendation: 1. Introduce colors.css (this file) and ensure it loads after inline critical styles. 2. Replace high-visibility components (buttons, nav brand, hero) to use semantic tokens only. 3. Migrate structural surfaces (body, sections, cards) to bg tokens. 4. Convert status badges & alerts (success/danger/warning/info) to semantic tokens. 5. Remove legacy variable definitions from inline critical CSS once all usages replaced. 6. Delete legacy nuclear gradient CSS if no longer needed. */ /* ===================== EXAMPLE UTILITY (optional incremental) ===================== */ .u-bg-canvas { background: var(--color-bg-canvas) !important; } .u-text-primary { color: var(--color-text-primary) !important; } .u-text-secondary { color: var(--color-text-secondary) !important; } .u-text-muted { color: var(--color-text-muted) !important; } .u-border-subtle { border-color: var(--color-border-subtle) !important; } .u-border-strong { border-color: var(--color-border-strong) !important; } .u-focus-ring { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Overlay utilities & visual helpers */ .u-overlay-1 { background: var(--overlay-scrim-1) !important; } .u-overlay-2 { background: var(--overlay-scrim-2) !important; } .u-overlay-3 { background: var(--overlay-scrim-3) !important; } .u-sheen-soft { background: linear-gradient(115deg,var(--sheen-white-soft), transparent 55%); } .u-sheen-strong { background: linear-gradient(115deg,var(--sheen-white-strong), transparent 60%); } .u-loader-glow { box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 28px -4px var(--loader-glow-blue), 0 0 54px -6px var(--loader-glow-green); } /* Premium badge / button helpers */ .u-premium-text { color: var(--premium-gold-400) !important; } .u-premium-glow { text-shadow: 0 0 12px rgba(233,172,34,0.55), 0 0 24px rgba(201,131,21,0.35); } .u-premium-ring { box-shadow: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--premium-gold-400), 0 0 0 8px rgba(233,172,34,0.4); } .u-premium-bg { background: var(--grad-premium) !important; color: var(--color-text-on-brand) !important; } .btn--premium { background: var(--grad-premium); color: var(--color-text-on-brand); border: 1px solid rgba(233,172,34,0.55); box-shadow: var(--premium-shadow); } .btn--premium:hover { filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(255,255,255,0.1),0 6px 26px -6px rgba(233,172,34,0.6),0 14px 42px -12px rgba(201,131,21,0.55); } .badge--premium { background: rgba(233,172,34,0.12); color: var(--premium-gold-400); border: 1px solid rgba(233,172,34,0.4); padding: .35rem .65rem; border-radius: .5rem; font-size: .7rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; display:inline-flex; align-items:center; gap:.35rem; } .badge--premium::before { content:"★"; font-size:.75em; opacity:.9; } /* Secondary (green) utilities */ .u-secondary-text { color: var(--secondary-400) !important; } .u-secondary-bg { background: var(--grad-secondary) !important; color: var(--color-text-on-brand) !important; } .u-secondary-ring { box-shadow: 0 0 0 2px var(--color-bg-base),0 0 0 4px var(--secondary-400),0 0 0 8px color-mix(in srgb,var(--secondary-400) 45%, transparent); } .btn--secondary { background: var(--grad-secondary); color: var(--color-text-on-brand); border: 1px solid color-mix(in srgb,var(--secondary-400) 55%, transparent); box-shadow: 0 4px 14px -4px rgba(37,201,153,0.35); } .btn--secondary:hover { filter: brightness(1.07); box-shadow: 0 6px 22px -6px rgba(37,201,153,0.5); } .badge--secondary { background: rgba(37,201,153,0.15); color: var(--secondary-400); border: 1px solid rgba(37,201,153,0.4); padding:.35rem .55rem; border-radius:.5rem; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; display:inline-flex; align-items:center; gap:.25rem; } .badge--secondary::before { content:"•"; font-size:1.1em; line-height:0; } /* ===================== SPACING SCALE (layout breathing room) ===================== */ /* 4px base unit with fluid mid-range clamps for responsive vertical rhythm */ [data-theme="dark"], [data-theme="light"] { --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: clamp(1.25rem,1.2rem + .4vw,1.75rem); /* 20–28px */ --space-6: clamp(1.75rem,1.6rem + .8vw,2.5rem); /* 28–40px */ --space-7: clamp(2.25rem,2.1rem + 1vw,3.25rem); /* 36–52px */ --space-8: clamp(3rem,2.6rem + 1.6vw,4.5rem); /* 48–72px */ --space-9: clamp(4rem,3.4rem + 2.2vw,6rem); /* 64–96px */ } /* Section rhythm utilities */ .section { padding-block: var(--space-8); } .section--tight { padding-block: var(--space-6); } .section--loose { padding-block: var(--space-9); } /* Lighter hero word shadow suggestion (apply class when refactoring hero) */ .shadow-hero-depth-soft { text-shadow: 0 1px 0 #000c, 0 2px 1px #0008, 0 4px 6px rgba(0,0,0,.55), 0 10px 22px rgba(0,0,0,.5); } /* End colors.css */