/* ============================================================ COLOR SYSTEM — slajob.dev Built outward from one soft blue (#A5C8E8), stretched into a tonal scale so a single hue does many jobs. Cool, faintly-blue neutrals (never warm cream). One warm coral accent, used once per view. ============================================================ */ :root { /* --- Brand blue scale (light → deep) --- */ --blue-tint: #E4F6FF; /* section washes, hover fills */ --blue-soft: #C4E2FE; /* chips, quiet surfaces */ --blue-anchor: #A5C8E8; /* the original color, decorative */ --blue-bright: #4A98D9; /* icons, charts, dark-mode links */ --blue-action: #1868A2; /* buttons, links, focus rings — the workhorse */ --blue-deep: #003A68; /* pressed states */ /* --- Warm accent (sparingly, once per view) --- */ --coral: #E08A6E; --coral-strong: #B35536; /* --- Cool neutrals (light mode) --- */ --canvas: #F6F8FB; --surface: #FFFFFF; --line: #E4E9F0; --muted: #6B7787; --body: #3A4554; --ink: #131922; /* ============================================================ SEMANTIC ALIASES (light) — reference these in components ============================================================ */ --bg-canvas: var(--canvas); --bg-surface: var(--surface); --bg-wash: var(--blue-tint); --bg-quiet: var(--blue-soft); --bg-hover: #EEF3F9; /* neutral hover fill */ --border-line: var(--line); --border-strong: #D3DBE6; --border-focus: var(--blue-action); --text-ink: var(--ink); /* headlines */ --text-body: var(--body); /* paragraphs */ --text-muted: var(--muted); /* metadata, captions */ --text-link: var(--blue-action); --text-on-action: #FFFFFF; --action: var(--blue-action); --action-hover: #155A8C; --action-pressed: var(--blue-deep); --action-ring: color-mix(in oklch, var(--blue-action) 35%, transparent); --accent: var(--coral); --accent-strong: var(--coral-strong); /* status (derived to sit in the cool family) */ --success: #1F8A5B; --warning: #C98A1E; --danger: #C24A3D; /* code surface */ --code-bg: #F0F4F9; --code-text: #1F2A38; /* liquid glass — translucent surface + blur + specular edge (light) */ --glass-bg: color-mix(in oklch, var(--surface) 60%, transparent); --glass-bg-strong: color-mix(in oklch, var(--surface) 78%, transparent); --glass-tint: color-mix(in oklch, var(--blue-tint) 50%, transparent); --glass-border: rgba(255, 255, 255, 0.65); --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.75); /* @kind shadow */ --glass-blur: 20px; } /* ============================================================ DARK MODE — cool, faintly-blue neutrals Apply via [data-theme="dark"] on or any ancestor. ============================================================ */ [data-theme="dark"] { --canvas: #0E1320; --surface: #161D2B; --line: #232C3C; --muted: #7E8AA0; --body: #AEB9CA; --ink: #E7ECF4; --bg-canvas: var(--canvas); --bg-surface: var(--surface); --bg-wash: #12243A; --bg-quiet: #1B2A3F; --bg-hover: #1C2536; --border-line: var(--line); --border-strong: #2E3A4D; --border-focus: var(--blue-bright); --text-ink: var(--ink); --text-body: var(--body); --text-muted: var(--muted); --text-link: var(--blue-bright); --text-on-action: #06223A; --action: var(--blue-bright); --action-hover: #6AAFE3; --action-pressed: var(--blue-anchor); --action-ring: color-mix(in oklch, var(--blue-bright) 40%, transparent); --accent: var(--coral); --accent-strong: #E8A088; --success: #43B27E; --warning: #E0A93F; --danger: #E0695C; --code-bg: #10192A; --code-text: #C7D2E2; /* liquid glass (dark) */ --glass-bg: color-mix(in oklch, var(--surface) 52%, transparent); --glass-bg-strong: color-mix(in oklch, var(--surface) 72%, transparent); --glass-tint: color-mix(in oklch, #1B3452 42%, transparent); --glass-border: rgba(255, 255, 255, 0.12); --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14); /* @kind shadow */ --glass-blur: 22px; }