/* pfpulse shared theme — single source of truth for light/dark palette. Colors stored as space-separated RGB channels so Tailwind opacity modifiers (text-primary/40) and rgb(var(--x)/a) both work. nav.js toggles the `.dark` class on . Default (:root) = light. */ :root{ /* ── LIGHT palette (MD3, cyan brand) — richer, less washed-out ── */ --surface:228 237 242; --on-surface:17 24 28; --on-surface-variant:52 64 72; --outline-variant:158 176 186; --sc-lowest:255 255 255; --sc-low:230 239 244; --sc:220 232 239; --sc-high:208 223 232; --sc-highest:196 214 225; --surface-bright:255 255 255; --primary:0 124 143; /* primary-container is widely (mis)used as accent TEXT color across pages; on light it must stay readable on white, so keep it a deep teal. Low-alpha bg-primary-container/NN fills still read as a light teal wash. */ --primary-container:0 124 143; --on-primary-container:0 32 38; --secondary:118 74 168; --secondary-container:230 210 255; --tertiary:196 84 0; --tertiary-container:255 214 184; --error:194 20 20; --error-container:255 214 210; /* effects */ --body-grad:linear-gradient(135deg,#dbe8ef 0%,#c9dce7 38%,#bfd6e5 70%,#d5e5ee 100%); --glass-base:255 255 255; --glass-a:.62; --glass-card-base:255 255 255; --glass-card-a:.82; --glass-input-base:255 255 255;--glass-input-a:.92; --edge-a:.28; --edge-top-a:.42; --success:21 128 61; --modal-card:255 255 255; /* opaque modal/dialog surface (light) */ color-scheme:light; } html.dark{ /* ── DARK palette (original) ── */ --surface:19 19 21; --on-surface:228 226 228; --on-surface-variant:193 198 215; --outline-variant:65 71 85; --sc-lowest:14 14 16; --sc-low:27 27 29; --sc:31 31 33; --sc-high:42 42 44; --sc-highest:53 52 55; --surface-bright:57 57 59; --primary:143 245 255; --primary-container:0 222 236; --on-primary-container:0 61 66; --secondary:193 128 255; --secondary-container:90 45 138; --tertiary:255 159 67; --tertiary-container:239 103 25; --error:255 180 171; --error-container:147 0 10; /* effects */ --body-grad:linear-gradient(135deg,#131315 0%,#0a0a0f 40%,#0f0d18 70%,#131315 100%); --glass-base:53 52 55; --glass-a:.45; --glass-card-base:30 30 34; --glass-card-a:.6; --glass-input-base:20 20 24; --glass-input-a:.7; --edge-a:.06; --edge-top-a:.1; --success:74 222 128; --modal-card:25 25 29; /* opaque modal/dialog surface (dark) */ color-scheme:dark; } *{box-sizing:border-box} body{font-family:'Inter',sans-serif;background:var(--body-grad);background-attachment:fixed;color:rgb(var(--on-surface))} /* Bright -400 accent utilities are widely used as accent TEXT (status, metrics, badges) across pages. On light they wash out on white. Darken to the -600 equivalent in light only; (0,2,0) specificity beats Tailwind's (0,1,0), and dark keeps the bright default. Solid text only — alpha modifiers (…/60) untouched. */ html:not(.dark) .text-green-400{color:#15803d} html:not(.dark) .text-emerald-400{color:#047857} html:not(.dark) .text-teal-400{color:#0f766e} html:not(.dark) .text-red-400{color:#b91c1c} html:not(.dark) .text-yellow-400{color:#a16207} html:not(.dark) .text-amber-400{color:#b45309} .glass{background:rgb(var(--glass-base)/var(--glass-a));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgb(var(--primary)/var(--edge-a))} .glass-card{background:rgb(var(--glass-card-base)/var(--glass-card-a));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgb(var(--primary)/var(--edge-a));border-top:1px solid rgb(var(--primary)/var(--edge-top-a))} .glass-input{background:rgb(var(--glass-input-base)/var(--glass-input-a));border:1px solid rgb(var(--primary)/var(--edge-a));color:rgb(var(--on-surface));outline:none;transition:border-color .15s;border-radius:10px;padding:10px 14px;font-size:14px} .glass-input:focus{border-color:rgb(var(--primary)/.35)} .glass-input::placeholder{color:rgb(var(--on-surface-variant)/.5)} .num{letter-spacing:-0.03em;font-variant-numeric:tabular-nums} @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .fade-up{animation:fadeUp .4s ease-out both} ::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgb(var(--primary)/.16);border-radius:4px}