/* Shared tokens. * * Light is the default and dark is an explicit override, both keyed off a * `data-theme` attribute that theme.js puts on before the first paint. * There is deliberately no `prefers-color-scheme` media query here any more: * theme.js resolves the system preference itself, so keeping the query too * would mean maintaining the dark palette in two places and having them drift. * * `--on-accent` exists because the primary button used to hardcode white text. * That is right on the light theme's dark-brown accent and poor on the dark * theme's pale tan — legible, but the sort of thing that fails a contrast check. */ :root, :root[data-theme="light"]{ /* Mint. The accent is green now, which creates a problem worth naming: `--ok` was also green, and a brand colour that looks like a success state costs you the success state. `--ok` has moved to a blue — still clearly "fine", no longer competing with the accent for meaning. Warnings stay amber, which is the pair that actually has to be unmistakable. */ --bg:#f8faf9; --panel:#fff; --ink:#141a17; --muted:#5f6b65; --line:#dde7e2; --accent:#0e7c5a; --accent-soft:#e3f4ec; --on-accent:#fff; --warn:#8a5a00; --warn-soft:#fdf3dd; --ok:#2c6b8a; --ok-soft:#e6f1f6; --counterparty:#3a5a8a; --counterparty-soft:#eaf0f8; --late:#7a4a6b; --late-soft:#f6ecf3; } :root[data-theme="dark"]{ --bg:#121614; --panel:#1a201d; --ink:#e8efea; --muted:#8fa199; --line:#2b3531; --accent:#74d6ab; --accent-soft:#162a22; --on-accent:#0c1a14; --warn:#e0b459; --warn-soft:#2d2618; --ok:#7fb6d4; --ok-soft:#16242c; --counterparty:#8fb0dd; --counterparty-soft:#1c2430; --late:#c99ebb; --late-soft:#2a1f27; } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink); font:15px/1.55 ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif} a{color:var(--accent)} button{font:inherit;font-size:14px;padding:9px 15px;border-radius:8px;cursor:pointer; border:1px solid var(--line);background:var(--panel);color:var(--ink)} button.primary{background:var(--accent);border-color:var(--accent); color:var(--on-accent);font-weight:600} button:disabled{opacity:.45;cursor:not-allowed} button.link{border:0;background:none;color:var(--accent);padding:2px 0; text-decoration:underline;font-size:13px} input,select,textarea{font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line); border-radius:8px;background:var(--bg);color:var(--ink);width:100%} .pill{padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.info{background:var(--accent-soft);color:var(--accent)} .pill.mute{background:var(--bg);color:var(--muted);border:1px solid var(--line)} .sub{color:var(--muted);font-size:13px;margin:0 0 14px} .hint{color:var(--muted);font-size:12.5px} dialog{border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink); padding:20px 22px;max-width:560px;width:92vw} dialog::backdrop{background:rgba(0,0,0,.4)} dialog h3{margin:0 0 4px;font-size:16px} .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px} /* Tickable option rows — used wherever a choice needs a line of explanation next to it rather than a bare label. */ .ticks{display:grid;gap:7px} .tick{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--bg); border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:13.5px} .tick:hover{border-color:var(--accent)} .tick input{width:auto;flex:none;margin-top:2px;accent-color:var(--accent)} .tick .hint{line-height:1.45} /* Summary cards. Used by the deal overview, the account dashboard and the reviews list, so it lives here rather than being copied into each page's