/* Placeholder until M3; tokens from docs/BRAND.md */
:root { --forest: #0E3840; --mint-btn: #147D6F; --mint-btn-hover: #126F62; --text: #152428; --surface-muted: #F6F8F8; --border: #DCE3E4; --focus: #179080; }
body { margin: 0; background: var(--surface-muted); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
main { max-width: 40rem; margin: 4rem auto; padding: 24px; background: #fff; border: 1px solid var(--border); border-radius: 8px; }
header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.product { font-weight: 600; color: var(--forest); border-left: 1px solid var(--border); padding-left: 16px; }
h1 { color: var(--forest); font-size: 1.75rem; margin: 0 0 8px; }
.button, button { display: inline-block; padding: 8px 16px; border-radius: 6px; font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; }
.button { background: var(--mint-btn); color: #fff; border: 0; }
.button:hover { background: var(--mint-btn-hover); }
button.secondary { background: #fff; color: var(--forest); border: 1px solid var(--forest); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }