/* Accent palettes are independent of the light/dark setting. Blue is the default. */
html[data-theme="light"][data-palette="ink"] { --accent:#25272b; --accent-strong:#25272b; --accent-strong-hover:#45484d; --accent-hover:#45484d; --link:#33363b; --accent-soft:#eeeeef; --focus-ring:0 0 0 3px rgba(60,64,70,.25); }
html[data-theme="dark"][data-palette="ink"] { --accent:#e2e4e8; --accent-strong:#e2e4e8; --accent-strong-hover:#fff; --accent-hover:#fff; --on-accent:#181a1f; --link:#e2e4e8; --accent-soft:#343941; --focus-ring:0 0 0 3px rgba(225,228,232,.3); }
html[data-theme="light"][data-palette="forest"] { --accent:#236947; --accent-strong:#236947; --accent-strong-hover:#174b33; --accent-hover:#174b33; --link:#236947; --accent-soft:#e6f2e9; --focus-ring:0 0 0 3px rgba(35,105,71,.25); }
html[data-theme="dark"][data-palette="forest"] { --accent:#9bd5b0; --accent-strong:#276c49; --accent-strong-hover:#33885d; --accent-hover:#b8e8c9; --link:#9bd5b0; --accent-soft:#193b2b; --focus-ring:0 0 0 3px rgba(155,213,176,.3); }
html[data-theme="light"][data-palette="terracotta"] { --accent:#a3432d; --accent-strong:#a3432d; --accent-strong-hover:#792f20; --accent-hover:#792f20; --link:#a3432d; --accent-soft:#f8eae5; --focus-ring:0 0 0 3px rgba(163,67,45,.25); }
html[data-theme="dark"][data-palette="terracotta"] { --accent:#f2b3a0; --accent-strong:#a3432d; --accent-strong-hover:#bd573e; --accent-hover:#ffd0c1; --link:#f2b3a0; --accent-soft:#48281f; --focus-ring:0 0 0 3px rgba(242,179,160,.3); }
/* Tokens, including button text, are shared with each existing light/dark mode. */
.landing-button { background:var(--accent-strong); color:var(--on-accent); }
.landing-button:hover { background:var(--accent-strong-hover); color:var(--on-accent); }
html[data-palette] .nav-link.is-active, html[data-theme="dark"][data-palette] .nav-link.is-active { color:var(--accent); background:var(--accent-soft); }
html[data-palette] .admin-nav .nav-link.active, html[data-palette] .admin-nav .nav-link.active .bi, html[data-theme="dark"][data-palette] .admin-nav .nav-link.active, html[data-theme="dark"][data-palette] .admin-nav .nav-link.active .bi { color:var(--accent); }
html[data-palette] .admin-nav .nav-link.active { background:var(--accent-soft); }
.palette-swatch--blue { background:#1967d2; }.palette-swatch--ink { background:#25272b; }.palette-swatch--forest { background:#236947; }.palette-swatch--terracotta { background:#a3432d; }
.settings-page { width:100%; max-width:760px; margin:0 auto; }
.settings-header { padding:0 0 28px; border-bottom:1px solid var(--border); }
.settings-header h1 { margin:0 0 6px; font-size:32px; line-height:1.2; letter-spacing:-.035em; }
.settings-header p,.appearance-section > p { margin:0; color:var(--text-2); font-size:15px; }
.appearance-section { padding:32px 0; }
.appearance-section h2 { margin:0 0 8px; font-size:21px; }
.appearance-options { border:0; padding:0; margin:28px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.appearance-options legend { padding:0; margin-bottom:12px; font-size:14px; font-weight:650; color:var(--text-1); }
.appearance-option { display:flex; align-items:center; gap:14px; min-height:80px; padding:16px; border:1px solid var(--border); border-radius:10px; cursor:pointer; background:var(--bg-surface); }
.appearance-option:hover { background:var(--bg-elevated); }
.appearance-option:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.appearance-option input { margin:0; accent-color:var(--accent); }
.appearance-option input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.appearance-option__swatch { width:34px; height:34px; border-radius:50%; flex:none; border:1px solid rgba(127,127,127,.25); }
.appearance-option__copy { display:grid; gap:3px; min-width:0; }
.appearance-option__copy strong { color:var(--text-1); font-size:15px; }
.appearance-option__copy small { color:var(--text-2); font-size:13px; }
.appearance-note { margin-top:24px !important; font-size:13px !important; }
@media (max-width:600px) { .settings-header h1 { font-size:27px; } .appearance-options { grid-template-columns:1fr; } .appearance-option { min-height:68px; } }