/* ===================================================================== PSF v2 — Mockup Theme Dark mode default; toggle to light via data-theme="light" on . Derived from the reference CSSD Central design language. ===================================================================== */ :root { /* Default = DARK */ --bg:#0c1018; --surf:#131824; --surf2:#1a2235; --surf3:#202840; --surf4:#283050; --bdr:#253048; --bdr2:#354060; --bdr3:#455070; --tx:#dde3f0; --tx2:#8a94aa; --tx3:#545e78; --tx4:#3c4560; /* Accent ramp (cyan – clinical) */ --ac:#22d3ee; --acl:#062030; --acm:#0891b2; --acd:#0e4a5a; /* Status colors */ --gr:#4ade80; --grl:#062015; --grm:#22c55e; --grd:#1a5c30; --am:#fbbf24; --aml:#1c1004; --amd:#5c3a08; --rd:#f87171; --rdl:#200808; --rdd:#6b1f1f; --pu:#a78bfa; --pul:#15102a; --pud:#3a2d6a; --tl:#2dd4bf; --tll:#042020; --or:#fb923c; --orl:#1f1208; --bl:#60a5fa; --bll:#0a1428; --pk:#f472b6; --pkl:#1f0a14; /* Layout */ --fn:'DM Sans', system-ui, sans-serif; --mn:'DM Mono', ui-monospace, monospace; --sb:220px; --r:8px; --rl:12px; --rxl:16px; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.35); --shadow-lg: 0 12px 32px rgba(0,0,0,.45); } body[data-theme=light] { --bg:#f0f2f6; --surf:#ffffff; --surf2:#f5f6f9; --surf3:#eaecf3; --surf4:#dde0ea; --bdr:#e3e6ed; --bdr2:#c9cdd8; --bdr3:#a8aebd; --tx:#1c2030; --tx2:#5a6275; --tx3:#9aa0b2; --tx4:#bcc0cd; --ac:#0e7490; --acl:#e0f5fb; --acm:#0891b2; --acd:#0d5a73; --gr:#1e7e4a; --grl:#e8f7ee; --grm:#22c55e; --am:#92500a; --aml:#fef3e2; --rd:#b91c1c; --rdl:#fde8e8; --rdd:#7c1212; --pu:#5b3fa6; --pul:#eeebfc; --tl:#0f6e6e; --tll:#e0f5f5; --or:#c2410c; --orl:#fff1e6; --bl:#1e40af; --bll:#dbeafe; --pk:#9d174d; --pkl:#fce7f3; --shadow-sm: 0 1px 2px rgba(15,23,42,.06); --shadow-md: 0 4px 12px rgba(15,23,42,.08); --shadow-lg: 0 12px 32px rgba(15,23,42,.12); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--fn); font-size: 13px; color: var(--tx); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'ss01','ss02','cv11'; } .font-mn { font-family: var(--mn); } /* Scrollbars */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bdr3); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--tx3); } /* Focus */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; } /* Selection */ ::selection { background: var(--ac); color: #000; } body[data-theme=light] ::selection { color: #fff; }