/* ============================================================ sqe-trainer — design tokens & base styles Light + dark themes via [data-theme] on . ============================================================ */ :root { /* ---- Spacing scale (generous) ---- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; /* ---- Radii ---- */ --r-ctrl: 6px; --r-card: 10px; /* ---- Type families ---- */ --font-reading: "Source Serif 4", Georgia, "Times New Roman", serif; --font-ui: "Public Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* ---- Type scale ---- */ --fs-display: clamp(26px, 4vw, 32px); --fs-heading: 21px; --fs-subhead: 16px; --fs-body-reading: 17.5px; /* overridden by tweaks */ --lh-reading: 1.75; --fs-body-ui: 14.5px; --fs-small: 13px; --fs-label: 11px; --measure: 66ch; /* comfortable line length for legal prose */ /* ---- Motion ---- */ --ease: cubic-bezier(.25,.6,.3,1); } /* ---- Light theme ---- */ :root, [data-theme="light"] { color-scheme: light; --bg: #FAF9F7; --surface: #FFFFFF; --surface-2: #F3F1EC; --text: #1B1B19; --muted: #6E6B64; --border: #E5E2DB; --border-strong: #CDC9C0; --accent: #31508F; --on-accent: #FFFFFF; --accent-soft: #EDF1F8; --correct: #2A6E4F; --correct-soft: #EAF3EE; --incorrect: #A33D38; --incorrect-soft: #F7ECEA; --shadow-card: 0 1px 2px rgba(27,27,25,.05); --shadow-pop: 0 4px 16px rgba(27,27,25,.10); } /* ---- Dark theme: warm charcoal, never pure black ---- */ [data-theme="dark"] { color-scheme: dark; --bg: #191917; --surface: #21211F; --surface-2: #2A2A27; --text: #ECEAE3; --muted: #98948A; --border: #34332F; --border-strong: #4A4943; --accent: #8CA5D8; --on-accent: #15233E; --accent-soft: #262C39; --correct: #6FBF98; --correct-soft: #20302A; --incorrect: #D8897F; --incorrect-soft: #342420; --shadow-card: 0 1px 2px rgba(0,0,0,.25); --shadow-pop: 0 4px 20px rgba(0,0,0,.45); } /* ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: var(--fs-body-ui); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ---- Type helpers ---- */ .t-display { font-family: var(--font-reading); font-size: var(--fs-display); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 0; } .t-heading { font-family: var(--font-reading); font-size: var(--fs-heading); font-weight: 600; line-height: 1.35; margin: 0; } .t-subhead { font-family: var(--font-ui); font-size: var(--fs-subhead); font-weight: 600; line-height: 1.4; margin: 0; } .t-reading { font-family: var(--font-reading); font-size: var(--fs-body-reading); line-height: var(--lh-reading); max-width: var(--measure); text-wrap: pretty; margin: 0; } .t-small { font-size: var(--fs-small); color: var(--muted); } .t-label { font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); } .tabular { font-variant-numeric: tabular-nums; } /* ---- Fine editorial rule ---- */ .rule { border: none; border-top: 1px solid var(--border); margin: 0; } a { color: var(--accent); } ::selection { background: var(--accent); color: var(--on-accent); } /* ---- Focus rings ---- */ button:focus-visible, a:focus-visible, input:focus-visible, [role="radio"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }