:root { color-scheme: light dark; /* Fallbacks until ThemeProvider sets the resolved tokens on . */ --color-background: #ffffff; --color-surface: #f4f5f7; --color-text: #0b0c0f; --color-textMuted: #5b6472; --color-accent: #2f6fed; --color-border: #e2e5ea; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, sans-serif; background: var(--color-background); color: var(--color-text); transition: background 0.2s ease, color 0.2s ease; } .app { max-width: 640px; margin: 0 auto; padding: 3rem 1.5rem; } .app h1 { color: var(--color-accent); margin-bottom: 0.25rem; } .app dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; padding: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; } .app dt { color: var(--color-textMuted); } .app dd { margin: 0; font-family: ui-monospace, monospace; } .theme-switch { display: flex; gap: 0.5rem; margin-top: 1.5rem; } .theme-switch button { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); cursor: pointer; } .theme-switch button[aria-pressed='true'] { border-color: var(--color-accent); color: var(--color-accent); }