/* ========================================================================== Bench — the Cosmovex web-product design system. Light by default, dark on request. One stylesheet for every product so the whole line reads as one thing. Theme resolution: LIGHT is the default for every product, deliberately — not "follow the OS". Dark applies only when the user asks for it: . Set data-theme BEFORE first paint (see the inline snippet in each product) or the page flashes the wrong theme. ========================================================================== */ :root{ /* light — the default */ --bg:#FBFBF9; --bg-sunk:#F2F2EE; --panel:#FFFFFF; --panel-2:#F7F7F4; --line:#E3E3DD; --line-strong:#D2D2CA; --ink:#16171A; --ink-2:#3E4148; --dim:#6B7079; --faint:#9AA0A8; --accent:#3B6B2F; /* deep green — readable on white, unlike lime */ --accent-ink:#FFFFFF; --accent-soft:#EDF4EA; --accent-line:#C6DCBC; --ok:#1F7A4D; --ok-soft:#E8F5EE; --ok-line:#B9E0CB; --bad:#B3261E; --bad-soft:#FCEDEC; --bad-line:#F2C3C0; --warn:#8A5A00; --warn-soft:#FDF3E0;--warn-line:#EED9A8; --shadow:0 1px 2px rgba(20,20,25,.05), 0 4px 14px rgba(20,20,25,.05); --shadow-lg:0 2px 6px rgba(20,20,25,.07), 0 18px 40px rgba(20,20,25,.09); --sans:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --r:12px; --r-lg:16px; } :root[data-theme="dark"]{ --bg:#0C0D10; --bg-sunk:#08090B; --panel:#15171B; --panel-2:#1B1E23; --line:#262A31; --line-strong:#333944; --ink:#ECEEF2; --ink-2:#C4C9D2; --dim:#8B93A0; --faint:#666D78; --accent:#C3F53C; --accent-ink:#0C0D10; --accent-soft:#1B2410; --accent-line:#2E3D1A; --ok:#6FE0A4; --ok-soft:#0F2419; --ok-line:#24402F; --bad:#FF8A84; --bad-soft:#2A1416; --bad-line:#4A2429; --warn:#FFC65C; --warn-soft:#2A2313; --warn-line:#4A4024; --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 18px 40px rgba(0,0,0,.5); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.5; padding-bottom:env(safe-area-inset-bottom); transition:background-color .18s ease, color .18s ease; } a{color:var(--accent)} code{ font-family:var(--mono); font-size:.9em; background:var(--bg-sunk); border:1px solid var(--line); border-radius:5px; padding:1px 5px; color:var(--ink-2); } ::selection{background:var(--accent-soft); color:var(--ink)} /* ---- theme toggle -------------------------------------------------------- */ .themebtn{ background:var(--panel); border:1px solid var(--line); color:var(--dim); width:34px; height:34px; border-radius:9px; cursor:pointer; display:grid; place-items:center; font-size:15px; line-height:1; flex:none; transition:border-color .12s, color .12s; } .themebtn:hover{border-color:var(--line-strong); color:var(--ink)} .themebtn .i-sun{display:none} .themebtn .i-moon{display:block} :root[data-theme="dark"] .themebtn .i-sun{display:block} :root[data-theme="dark"] .themebtn .i-moon{display:none} /* ---- surfaces ------------------------------------------------------------ */ .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)} .sunk{background:var(--bg-sunk);border:1px solid var(--line);border-radius:var(--r)} /* ---- buttons ------------------------------------------------------------- */ .btn{ background:var(--panel); color:var(--ink); border:1px solid var(--line-strong); border-radius:10px; padding:12px 16px; font:inherit; font-size:15px; font-weight:500; cursor:pointer; transition:transform .06s, border-color .12s, background-color .12s; } .btn:hover{border-color:var(--faint)} .btn:active{transform:scale(.985)} .btn:disabled{opacity:.45;cursor:default} .btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700} .btn-primary:hover{filter:brightness(1.06)} .btn-ghost{background:transparent;border-color:var(--line)} /* ---- form ---------------------------------------------------------------- */ .field{ width:100%; background:var(--panel); color:var(--ink); border:1px solid var(--line-strong); border-radius:10px; padding:12px; font-family:var(--mono); font-size:14px; line-height:1.6; outline:none; -webkit-appearance:none; transition:border-color .12s, box-shadow .12s; } .field:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)} textarea.field{min-height:132px;resize:vertical} /* ---- feedback ------------------------------------------------------------ */ .note{border-radius:10px;padding:12px 14px;font-size:14.5px;line-height:1.55;border:1px solid} .note-ok{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)} .note-bad{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad)} .note-warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)} .note b{color:inherit} /* ---- data table ---------------------------------------------------------- */ .tablewrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)} .tablewrap .cap{padding:9px 13px;font-size:12px;color:var(--dim);border-bottom:1px solid var(--line);font-family:var(--mono);background:var(--panel-2)} .tablescroll{overflow-x:auto} table{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:12.5px} th,td{text-align:left;padding:8px 13px;border-bottom:1px solid var(--line);white-space:nowrap} th{color:var(--ink);font-weight:600;background:var(--panel-2)} td{color:var(--ink-2)} tr:last-child td{border-bottom:none} /* ---- misc ---------------------------------------------------------------- */ .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--accent);font-weight:700} .dim{color:var(--dim)} .mono{font-family:var(--mono)} .spacer{flex:1}