/* ════════════════════════════════════════════════════════════════ DESIGN TOKENS — Wiens Corporation / OptiTower brand system Source of truth: brand-style-guide.md Semantic tokens (--bg1, --tx1, etc.) are backed by primitives (--wc-navy, --wc-teal, etc.) so any visual change happens here. ════════════════════════════════════════════════════════════════ */ :root{ /* ── Brand primitives ── */ --wc-navy:#0A2634; --wc-deep-navy:#000F1D; --wc-teal:#32AFB6; --wc-green:#89C491; --wc-black:#000000; --wc-white:#FFFFFF; /* Navy scale */ --wc-navy-100:#E6E9EB; --wc-navy-200:#CDD4D7; --wc-navy-300:#9BA8B1; --wc-navy-400:#6B818C; --wc-navy-600:#081F2A; --wc-navy-700:#061720; --wc-navy-800:#040F15; /* Teal scale */ --wc-teal-100:#EAF7F8; --wc-teal-200:#D6EFF1; --wc-teal-300:#ADE0E3; --wc-teal-400:#84D1D6; --wc-teal-600:#2B8C92; --wc-teal-700:#1E696D; --wc-teal-800:#144649; /* Green scale */ --wc-green-100:#E7F3E9; --wc-green-200:#D0E7D4; --wc-green-600:#6EA376; --wc-green-700:#54825C; /* Signature brand gradient */ --wc-gradient:linear-gradient(135deg,var(--wc-green) 0%,var(--wc-teal) 100%); /* ── Typography ── */ --font-display:"Nunito Sans","Segoe UI",-apple-system,Helvetica,Arial,sans-serif; --font-body:"Exo 2","Nunito Sans","Segoe UI",Helvetica,Arial,sans-serif; --sans:var(--font-body); /* legacy alias used throughout existing CSS */ --eyebrow-ls:.12em; --title-ls:.02em; /* ── Shape & motion ── */ --r:6px; --rl:10px; --rxl:14px; --divider:3px; --shadow-sm:0 1px 2px rgba(10,38,52,.06); --shadow-md:0 6px 18px rgba(10,38,52,.08); --shadow-lg:0 18px 44px rgba(0,15,29,.22); --focus-ring:0 0 0 3px rgba(50,175,182,.28); /* ── Semantic (light mode) ── */ --bg0:var(--wc-white); --bg1:var(--wc-white); /* card surface */ --bg2:#F2F5F7; /* page / subtle surface */ --bg3:var(--wc-navy-100); /* tertiary tint */ --surface-brand:var(--wc-deep-navy); --surface-brand-ink:var(--wc-white); --tx1:var(--wc-navy); --tx2:#49606B; --tx3:#576B76; /* ≥4.5:1 on --bg1, --bg2, --bg3 */ --tx-on-brand:var(--wc-white); --teal:var(--wc-teal-700); /* interactive text on light surfaces */ --teal-hover:var(--wc-teal-800); --green:var(--wc-green); --link:var(--wc-teal-700); --link-hover:var(--wc-teal-800); --bd3:rgba(10,38,52,0.09); --bd2:rgba(10,38,52,0.16); --bd1:var(--wc-teal); /* Status chips — cool/cohesive with brand */ --bg-info:#E6F1FB; --tx-info:#155A9E; --bd-info:#B5D4F4; --bg-warn:#FBE9CE; --tx-warn:#7A4A0F; --bd-warn:#EFB558; --bg-ok:var(--wc-green-100); --tx-ok:#2F6B3A; --bd-ok:var(--wc-green-200); --bg-danger:#FBE8E8; --tx-danger:#A32D2D; --bd-danger:#F3B7B7; /* Legacy aliases — used across components, line-layout chrome, modals, JS fallbacks */ --accent:var(--link); --border:#DDE3E8; --radius:var(--r); --tx:var(--tx1); --bg:var(--bg1); --bd:var(--bd2); --bg-card2:var(--bg2); --tx-accent:var(--link); --red:var(--tx-danger); --warn:var(--tx-warn); --ok:var(--tx-ok); /* Material-flow type dots (Stations tab) */ --mflow-in:#3B6D11; --mflow-flow:#185FA5; --mflow-out:#854F0B; /* Solid fills — bg uses status *text* tokens in light, *surface* tokens in dark */ --fill-danger:var(--tx-danger); --fill-danger-fg:var(--wc-white); --fill-warn:var(--tx-warn); --fill-warn-fg:var(--wc-white); --btn-primary-bg:var(--wc-teal-700); --btn-primary-hover:var(--wc-teal-800); --btn-primary-fg:var(--wc-white); /* PFMEA severity fills — white label text ≥4.5:1 */ --sev-high-bg:#B45309; --sev-low-bg:var(--wc-green-700); } /* Dark mode: explicit opt-in via [data-theme="dark"] on . Theme is always explicit (set by inline init script), so no @media fallback needed. */ :root[data-theme="dark"]{ --bg0:#081822; --bg1:#0E2837; /* card surface (dark) */ --bg2:var(--wc-deep-navy); /* page */ --bg3:#143142; --surface-brand:#000710; --tx1:#EAF3F4; --tx2:#9FB6BF; --tx3:#879EAA; /* ≥4.5:1 on --bg1 (#0E2837) */ --bd3:rgba(255,255,255,0.08); --bd2:rgba(255,255,255,0.16); --bd1:var(--wc-teal); --bg-info:#0C3358; --tx-info:#9DD0FB; --bd-info:#1E5A9E; --bg-warn:#402808; --tx-warn:#FAC775; --bd-warn:#8A5B13; --bg-ok:#1B4A23; --tx-ok:#C4DFCA; --bd-ok:#2F6B3A; --bg-danger:#4A1414; --tx-danger:#F3B7B7;--bd-danger:#7C2626; --border:#1E3A4A; --bg-card2:#122A38; --fill-danger:var(--bg-danger); --fill-danger-fg:var(--tx-danger); --fill-warn:var(--bg-warn); --fill-warn-fg:var(--tx-warn); --btn-primary-bg:var(--wc-teal-700); --btn-primary-hover:var(--wc-teal-800); --btn-primary-fg:var(--wc-white); --teal:var(--wc-teal); --teal-hover:var(--wc-teal-600); --link:var(--wc-teal); --link-hover:var(--wc-teal-400); --accent:var(--wc-teal); --tx-accent:var(--wc-teal); --mflow-in:#6EA376; --mflow-flow:#9DD0FB; --mflow-out:#FAC775; }