/* ============================================ DataLink v01 — Light Theme (opt-in) White surfaces with Data Link green accents Activated via [data-theme="light"] on ============================================ */ [data-theme="light"] { /* ---- Backgrounds ---- */ /* Cool neutrals (was warm grey #f5f5f0 family — read dated against pure white). Jeff's black-on-white minimal direction. */ --bg-base: #ffffff; --bg-surface: #ffffff; --bg-elevated: #f6f7f8; --bg-hover: #eceef0; --bg-active: #e2e4e7; --bg-overlay: rgba(0, 0, 0, 0.4); /* ---- Borders ---- */ --border-subtle: #e4e6e8; --border-default: #d2d5d8; --border-strong: #9ba0a5; --border-focus: #00a554; /* ---- Text ---- */ /* Small UI labels (10-11px uppercase tracking-wider) need more visual weight on white than the WCAG floor — the eye reads "faded" before it reads "muted." Secondary darkened from #565651 to #3a3a3f after Matt flagged sidebar labels as hard to read. */ --text-primary: #1c1c1f; --text-secondary: #3a3a3f; --text-muted: #6b6b65; --text-inverse: #ffffff; /* ---- Accent — Data Link green, darkened for legibility on white ---- */ /* The dark-mode accent #00d26a only hits ~2.4:1 contrast on white. Shifting to #00a554 buys ~3.4:1 — still decorative-only by WCAG, but readable for icons/borders/badges. Body text uses --text-primary, not the accent, so this is fine. */ --accent: #00a554; --accent-dim: #007a3a; --accent-bright: #00c361; --accent-subtle: rgba(0, 165, 84, 0.12); /* ---- Semantic Colors — slightly darkened for white-bg legibility ---- */ --color-success: #0f8a6a; --color-success-dim: rgba(15, 138, 106, 0.12); --color-warning: #b67200; --color-warning-dim: rgba(182, 114, 0, 0.12); --color-danger: #c42424; --color-danger-dim: rgba(196, 36, 36, 0.12); --color-info: #0773aa; --color-info-dim: rgba(7, 115, 170, 0.12); --status-pass: #0f8a6a; --status-fail: #c42424; --status-ni: #b67200; --status-na: #8a8a82; /* ---- Shadows — softer on white than near-black ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12); --shadow-glow: 0 0 20px rgba(0, 165, 84, 0.15); /* Accent glow — lockstep with theme-dark; muted for white surfaces */ --accent-glow: rgba(0, 165, 84, 0.25); --shadow-accent-sm: 0 0 0 3px rgba(0, 165, 84, 0.12); /* Code syntax colors — GitHub-light-ish, low saturation per Jeff */ --code-keyword: #cf222e; --code-string: #0a3069; --code-number: #953800; --code-comment: #6e7781; --code-title: #8250df; --code-attr: #116329; /* ---- Glass morphism — neutralized for Jeff's black-on-white aesthetic. The dark theme uses green/blue/purple radial mesh to liven near-black surfaces; on white that just adds a green tint Jeff doesn't want. Mesh layers transparent, header glow neutral gray, panels pure white. */ --glass-mesh-1: transparent; --glass-mesh-2: transparent; --glass-mesh-3: transparent; --glass-header-bg: rgba(255, 255, 255, 0.95); --glass-header-border: rgba(0, 0, 0, 0.1); --glass-header-glow: rgba(0, 0, 0, 0.05); --glass-panel-bg: #ffffff; --glass-panel-border: rgba(0, 0, 0, 0.1); --glass-panel-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); --glass-nav-text: rgba(0, 0, 0, 0.6); --glass-nav-hover-text: rgba(0, 0, 0, 0.9); --glass-nav-hover-bg: rgba(0, 0, 0, 0.04); --glass-nav-active-bg: rgba(0, 0, 0, 0.06); --glass-nav-active-border: rgba(0, 0, 0, 0.15); --glass-user-hover-bg: rgba(0, 0, 0, 0.03); --glass-user-hover-border: rgba(0, 0, 0, 0.05); --glass-avatar-bg: rgba(0, 0, 0, 0.06); --glass-avatar-border: rgba(0, 0, 0, 0.15); --glass-user-name: rgba(0, 0, 0, 0.9); --glass-user-role: rgba(0, 0, 0, 0.5); --glass-icon-color: rgba(0, 0, 0, 0.55); --glass-icon-hover-bg: rgba(0, 0, 0, 0.05); --glass-icon-hover-border: rgba(0, 0, 0, 0.1); --shadow-glow: 0 0 16px rgba(0, 0, 0, 0.04); /* ---- RGB-channel companions ---- */ /* Drives the Tailwind palette; same slot names as theme-dark.css with inverted lightness. Keep these in lockstep with the dark file. */ --bg-base-rgb: 255 255 255; --bg-surface-rgb: 255 255 255; --bg-elevated-rgb: 246 247 248; --border-subtle-rgb: 228 230 232; --border-default-rgb: 210 213 216; --text-secondary-rgb: 58 58 63; --text-muted-rgb: 107 107 101; --accent-rgb: 0 165 84; --accent-dim-rgb: 0 122 58; --accent-bright-rgb: 0 195 97; }