/* -------- 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 -------- */ body{ background: var(--bg); color: var(--ink); } .page-container{ max-width: 900px; margin: 0 auto; padding: 1.25rem 1rem 2rem; } .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{ color: var(--muted); } ul, ol{ margin: .25rem 0 .8rem 1.2rem; } li{ margin: .25rem 0; } /* Optional card blocks if you need them later */ .card{ background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1rem; margin: .75rem 0; } /* Links / buttons */ a{ color: var(--link); } a:hover{ text-decoration: underline; } .btn{ display:inline-block; padding:.6rem 1rem; border-radius:8px; font-weight:600; background: var(--blue); color:#fff; text-decoration:none; border:1px solid transparent; }