/* ---------- Brand tokens ---------- */ :root{ --blue:#1f6feb; --yellow:#ffd24d; --ink:#0f172a; --ink-strong:#0b1221; --muted:#64748b; --bg:#ffffff; --card:#ffffff; --border:rgba(0,0,0,.08); --link:#1f6feb; } @media (prefers-color-scheme: dark){ :root{ --bg:#0b1020; --ink:#e5e7eb; --ink-strong:#e5e7eb; --muted:#94a3b8; --card:#0f172a; --border:#1e293b; --link:#8ab4ff; } } /* Manual toggle via */ html.dark-mode{ --bg:#0b1020; --ink:#e5e7eb; --ink-strong:#e5e7eb; --muted:#94a3b8; --card:#0f172a; --border:#1e293b; --link:#8ab4ff; } /* ---------- Layout & typography ---------- */ body{ background: var(--bg); color: var(--ink); } .page-container h1{ margin: 0 0 .5rem; font-size: clamp(1.8rem,2.6vw,2.3rem); color: var(--ink-strong); } .page-container h3{ margin: 1.2rem 0 .45rem; font-size: 1.15rem; color: var(--ink-strong); } .page-container p{ color: var(--ink); } .page-container em, .hint{ color: var(--muted); } ul, ol{ margin: .25rem 0 .8rem 1.2rem; } li{ margin: .25rem 0; } /* ---------- Cards / tables ---------- */ .policy-card{ background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1rem; margin: .75rem 0; } .table{ width: 100%; border-collapse: collapse; margin: .6rem 0; background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .table th, .table td{ padding: .6rem .7rem; border-bottom: 1px solid var(--border); text-align: left; } .table th{ background: color-mix(in oklab, var(--blue) 10%, transparent); color: var(--ink-strong); } .table tr:last-child td{ border-bottom: none; } /* ---------- Links & buttons ---------- */ a{ color: var(--link); } a:hover{ text-decoration: underline; } .btn{ display:inline-block; padding:.6rem 1rem; border-radius:8px; font-weight:600; text-decoration:none; border:1px solid transparent; background: var(--blue); color:#fff; }