/* ========================================================= OwnWave / OWTech Theme Tokens - Centralized CSS variables for colors, borders, focus rings. - Supports Dark (default) and Light (white-azure) themes. Usage - Default theme is Dark. - Switch theme by setting attribute on : or Notes - Components should not hardcode colors; use variables. - Legacy variables (--ow-*) are kept as aliases for existing CSS. ========================================================= */ :root { /* -------- Core tokens (Dark defaults) -------- */ --bg: #0b0f14; --surface: #0f1620; --surface-2: #111b27; --text: #e6eef7; --text-muted: #9ab0c7; --primary: #4aa3ff; --primary-hover: #79c4ff; --primary-contrast: #0b0f14; --link: #4aa3ff; --link-hover: #79c4ff; --success: #7dffa7; --warning: #ffcc66; --danger: #ff6b6b; --shadow: 0 10px 36px rgba(0,0,0,.25); --shadow-lg: 0 18px 50px rgba(0,0,0,.55); /* Border/focus as tokens (kept RGBA to preserve "glassy" style) */ --border-rgb: 255,255,255; --border-a: .08; --border: rgba(var(--border-rgb), var(--border-a)); /* Stronger border for hover/active states */ --border-2: rgba(var(--border-rgb), calc(var(--border-a) + .08)); /* Status soft backgrounds */ --success-soft: rgba(var(--success-rgb), .10); --warning-soft: rgba(var(--warning-rgb), .10); --danger-soft: rgba(var(--danger-rgb), .12); --focus: 0 0 0 3px rgba(var(--primary-rgb), .22); /* -------- RGB channels (to build theme-safe rgba() values) -------- */ --bg-rgb: 11,15,20; --surface-rgb: 15,22,32; --surface-2-rgb: 17,27,39; --text-rgb: 230,238,247; --text-muted-rgb: 154,176,199; --primary-rgb: 74,163,255; --success-rgb: 125,255,167; --warning-rgb: 255,204,102; --danger-rgb: 255,107,107; /* -------- Derived helpers (do not hardcode per-theme colors) -------- */ --soft-bg: rgba(var(--text-rgb), .02); --soft-bg-2: rgba(var(--text-rgb), .04); --soft-bg-hover: rgba(var(--text-rgb), .06); --primary-soft: rgba(var(--primary-rgb), .14); --primary-soft-2: rgba(var(--primary-rgb), .22); --primary-soft-hover: rgba(var(--primary-rgb), .24); /* "Glass" surfaces (sticky headers / dropdowns) */ --glass-bg: rgba(var(--bg-rgb), .92); --menu-bg: rgba(var(--surface-rgb), .98); /* -------- Legacy aliases (compat) -------- */ --ow-bg: var(--bg); --ow-surface: var(--surface); --ow-card: var(--surface-2); --ow-text: var(--text); --ow-muted: var(--text-muted); --ow-border: var(--border); --ow-accent: var(--primary); --ow-accent2: var(--success); --ow-warn: var(--warning); } /* Default scheme: Dark */ html { color-scheme: dark; } /* Light theme (white-azure) overrides */ html[data-theme="light"] { --bg: #ffffff; --surface: #ffffff; --surface-2: #f0f8ff; --text: #0b1220; --text-muted: #3b5168; --primary: #0096d6; --primary-hover: #007ab1; --primary-contrast: #ffffff; --link: #007ab1; --link-hover: #005f8a; --success: #16a34a; --warning: #b45309; --danger: #dc2626; --shadow: 0 6px 24px rgba(14,42,71,.10); --shadow-lg: 0 18px 50px rgba(14,42,71,.14); --border-rgb: 14,42,71; --border-a: .12; --focus: 0 0 0 3px rgba(var(--primary-rgb), .35); --bg-rgb: 255,255,255; --surface-rgb: 255,255,255; --surface-2-rgb: 240,248,255; --text-rgb: 11,18,32; --text-muted-rgb: 59,81,104; --primary-rgb: 0,150,214; --success-rgb: 22,163,74; --warning-rgb: 180,83,9; --danger-rgb: 220,38,38; } html[data-theme="light"] { color-scheme: light; }