/* ───────────────────────────────────────────────────────────────── shared/base.css — site-wide layout, theme tokens, and primitives ───────────────────────────────────────────────────────────────── Builds on Open-Props (loaded before this file in index.html), which provides the primary design tokens we reference: --size-* spacing scale https://open-props.style/#sizes --font-size-* type scale https://open-props.style/#typography --radius-* corner radii https://open-props.style/#sizes --shadow-* elevation https://open-props.style/#shadows --gray-*, --green-*, --red-*, … colour palettes https://open-props.style/#colors --font-sans, --font-mono https://open-props.style/#typography We add a small set of semantic aliases (--surface-1, --text-1, …) so page-level styles never reach for raw palette values. Swap the alias layer to re-skin the whole app without touching component CSS. */ :root { color-scheme: light dark; /* ── Light theme semantic aliases ── */ --surface-1: var(--gray-0); /* page background */ --surface-2: #ffffff; /* cards, modals */ --surface-3: var(--gray-1); /* sidebars, subtle panels */ --surface-4: var(--gray-2); /* hovers, dividers */ --text-1: var(--gray-9); /* primary text */ --text-2: var(--gray-6); /* muted / secondary */ --link: var(--green-7); --accent: var(--green-6); --accent-strong: var(--green-7); --border: var(--gray-2); --danger: var(--red-6); --shell-shadow: var(--shadow-3); } /* ── Dark theme overrides ── Toggled by shared/theme.js setting . */ [data-theme="dark"] { --surface-1: var(--gray-12); --surface-2: var(--gray-11); --surface-3: var(--gray-10); --surface-4: var(--gray-9); --text-1: var(--gray-0); --text-2: var(--gray-4); --link: var(--green-3); --accent: var(--green-4); --accent-strong: var(--green-3); --border: var(--gray-9); --danger: var(--red-4); } /* ── Reset / base layer ── `open-props/normalize` already does the heavy lifting; we just align a few defaults with our token aliases. */ html, body { background: var(--surface-1); color: var(--text-1); font-family: var(--font-sans); } body { margin: 0; min-height: 100vh; } a { color: var(--link); } /* ── Layout primitives shared by every page ── */ .app-shell { display: flex; flex-direction: column; min-height: 100vh; } .topbar { display: flex; align-items: center; gap: var(--size-3); padding: var(--size-2) var(--size-4); background: var(--surface-2); border-block-end: 1px solid var(--border); box-shadow: var(--shadow-1); } .topbar h1 { font-size: var(--font-size-3); margin: 0; } .topbar .spacer { flex: 1; } .main { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--size-5) var(--size-3); } /* ── Reusable card / form container ── */ .card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-3); box-shadow: var(--shell-shadow); padding: var(--size-5); width: min(28rem, 100%); display: flex; flex-direction: column; gap: var(--size-3); } .card h2 { margin: 0; font-size: var(--font-size-4); } .card p { color: var(--text-2); margin: 0; } /* ── Form fields ── */ .field { display: flex; flex-direction: column; gap: var(--size-1); } .field label { font-size: var(--font-size-0); font-weight: var(--font-weight-6); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; } .field input { font-size: var(--font-size-2); padding: var(--size-2) var(--size-3); border-radius: var(--radius-2); border: 1px solid var(--border); background: var(--surface-1); color: var(--text-1); } .field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } /* ── Buttons ── Open-Props' buttons.min.css gives us reasonable defaults; we add `.btn-primary` for the dominant call-to-action. */ .btn-primary { background: var(--accent); color: var(--gray-0); border: none; border-radius: var(--radius-2); padding: var(--size-2) var(--size-3); font-size: var(--font-size-2); font-weight: var(--font-weight-6); cursor: pointer; } .btn-primary:hover { background: var(--accent-strong); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } /* Inline feedback */ .error { color: var(--danger); font-size: var(--font-size-1); } .muted { color: var(--text-2); font-size: var(--font-size-1); }