/* Shared reset, font stack and palette. Colors use light-dark() so pages follow the OS theme; theme.js records an explicit override on . */ :root { color-scheme: light dark; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --paper: light-dark(#FFF7EE, #131629); /* cream / ink */ --ink: light-dark(#1B1F3B, #F6E7D3); --muted: light-dark(#5B5A6B, #B4AFC2); --soft: light-dark(#8A8798, #837E94); --card: light-dark(#FFFFFF, #1B1F3B); --section: light-dark(#F6E7D3, #171A33); --border: light-dark(#EADCC8, #2E3358); --kraft: var(--border); /* card border on the checkout/key/device pages */ --accent: light-dark(#7F5700, #E2B04A); /* gold (darkened for contrast on cream) */ --accent-d: light-dark(#6B4A00, #F0C56A); --accent-soft: light-dark(#F6E7D3, #3A2F14); --accent-ink: light-dark(#6B4A00, #F6D58A); --btn: light-dark(#1B1F3B, #E2B04A); /* primary buttons: ink on light, gold on dark */ --btn-d: light-dark(#0F1226, #F0C56A); --btn-text: light-dark(#FFF7EE, #131629); --danger: light-dark(#B42318, #F97066); --danger-soft: light-dark(#FEE4E2, #4A1B18); --warn: light-dark(#B54708, #FDB022); --warn-soft: light-dark(#FEF0C7, #4A3410); --ok: light-dark(#067647, #32D583); --ok-soft: light-dark(#DCFAE6, #0F3D26); --info-soft: light-dark(#E0ECFF, #1B2A44); --shadow: light-dark(0 10px 30px rgba(27, 31, 59, 0.10), 0 10px 30px rgba(0, 0, 0, 0.5)); --shadow-lg: light-dark(0 22px 55px rgba(27, 31, 59, 0.16), 0 22px 55px rgba(0, 0, 0, 0.62)); --maxw: 1040px; } :root[data-theme='light'] { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; } * { margin: 0; padding: 0; box-sizing: border-box; } a { color: var(--accent); } body { font-family: var(--font-sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; line-height: 1.55; } :where(a, button, summary, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }