/* 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"]{ /* Cleaner and warmer than it was. The old light palette put a muted brown on a grey-beige background, which read as drab next to the dark theme the accent was actually drawn for. Brighter surfaces, a more saturated accent, softer rules. */ --bg:#faf9f6; --panel:#fff; --ink:#1a1917; --muted:#6b675f; --line:#e7e3da; --accent:#a8481c; --accent-soft:#fbeee5; --on-accent:#fff; --warn:#8a5a00; --warn-soft:#fdf3dd; --ok:#2f6b4a; --ok-soft:#e8f2ec; --client:#35548a; --client-soft:#e9eff8; --late:#7a4a6b; --late-soft:#f6ecf3; } :root[data-theme="dark"]{ --bg:#161614; --panel:#1f1e1b; --ink:#eceae4; --muted:#9a978f; --line:#33312c; --accent:#d99b74; --accent-soft:#2c231d; --on-accent:#241a13; --warn:#e0b459; --warn-soft:#2d2618; --ok:#7fbb99; --ok-soft:#1b2a22; --client:#8fb0dd; --client-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 loan overview, the account dashboard and the reviews list, so it lives here rather than being copied into each page's