/* Shared palette: every surface, including editors and login, follows the theme. */
:root {
  color-scheme: light;
  --bg: #f6f3ec;
  --paper: #fffdf8;
  --ink: #283b32;
  --muted: #6e7167;
  --green: #365343;
  --line: #e0ddd2;
  --soft: #edece2;
  --gold: #87682e;
  --red: #a43f3a;
  --radius: 14px;
  --field: #fffefb;
  --primary: #304d3e;
  --primary-hover: #20392c;
  --on-primary: #fffaf0;
  --gold-soft: #ede4cf;
  --notice-bg: #f2e9d5;
  --notice-ink: #755b27;
  --error-bg: #f8e7e2;
  --art: #dfdfcb;
  --art-white: #ece2c7;
  --art-red: #dfccc6;
  --art-rose: #ead7ce;
  --art-glow: #fffcf0b3;
  --badge: #fffdf5e8;
  --shadow: 0 10px 36px #3b352508;
  --shadow-hover: 0 16px 40px #3b352514;
  --glow: #d7c18d1a;
  --switch-track: #c4c6ba;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141917;
  --paper: #1d2520;
  --ink: #f0ece0;
  --muted: #b0b5a9;
  --green: #cdb581;
  --line: #384038;
  --soft: #29332b;
  --gold: #d2b77e;
  --red: #f29f94;
  --field: #19211c;
  --primary: #d1b77f;
  --primary-hover: #e2cb9a;
  --on-primary: #1a241d;
  --gold-soft: #3b3628;
  --notice-bg: #383121;
  --notice-ink: #e0c690;
  --error-bg: #402824;
  --art: #333e32;
  --art-white: #494534;
  --art-red: #483333;
  --art-rose: #4c3c36;
  --art-glow: #bda36b30;
  --badge: #1a211ce8;
  --shadow: 0 10px 36px #0000001c;
  --shadow-hover: 0 18px 42px #00000038;
  --glow: #bea5700b;
  --switch-track: #525e51;
}
body { background: radial-gradient(ellipse at 65% 0, var(--glow), transparent 55%), var(--bg); }
::selection { background: var(--gold-soft); color: var(--ink); }
button, .sidebar, .stat, .wine-card, .wine-card:hover, .filters, .panel,
.shelf-card, dialog, .dialog-header, .auth-card, .vintage-link {
  background: var(--paper);
  color: var(--ink);
}
button { border-radius: 8px; font-weight: 500; }
button:hover { background: var(--soft); border-color: var(--gold); }
.primary, .chip.active, .tag-picker .chip.active {
  background: var(--primary); color: var(--on-primary); border-color: var(--primary);
}
.primary:hover, .chip.active:hover { background: var(--primary-hover); color: var(--on-primary); }
.quiet { background: transparent; }
.danger { color: var(--red); }
:focus-visible { outline-color: var(--gold); }
input, select, textarea { background: var(--field); border-color: var(--line); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type=file]::file-selector-button { background: var(--soft); color: var(--ink); border: 1px solid var(--line); border-radius: 5px; padding: 6px 9px; }
label { color: var(--ink); }
.sidebar { border-right-color: var(--line); }
.brand-icon { color: var(--gold); border-color: var(--gold); border-radius: 14px 14px 3px 3px; flex-shrink: 0; width: 44px; height: 50px; }
.brand { letter-spacing: -.65px; }
.brand small[data-account-name] { color: var(--muted); }
.nav-label, nav a, .cellar-note, .account>i, .topbar, .search i { color: var(--muted); }
nav a { border: 1px solid transparent; }
nav a:hover { background: var(--soft); }
nav a.active { background: var(--soft); color: var(--ink); border-color: var(--line); }
nav a.active i, .cellar-note i { color: var(--gold); }
.account, .avatar { background: var(--soft); }
.account { border: 1px solid var(--line); }
.avatar { color: var(--gold); border: 1px solid var(--line); }
.topbar { letter-spacing: 2px; gap: 18px; }
.topbar-right { max-width: 55%; margin-left: auto; }
.theme-control { flex-shrink: 0; }
.theme-toggle { border-color: var(--line); background: var(--paper); border-radius: 50%; width: 44px; height: 44px; padding: 10px; box-shadow: var(--shadow); font-size:0.8125rem; }
.auth-card .theme-control { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.theme-toggle i { color: var(--gold); width: 14px; }
.eyebrow { letter-spacing: 2.6px; color: var(--gold); }
h1 { font-size: clamp(2.25rem, 1.75rem + 1.5vw, 3.25rem); letter-spacing: -1.7px; line-height: 1.1; }
.page-heading { padding-bottom: 25px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.page-heading h1::after { content: ''; display: block; width: 42px; height: 2px; background: var(--gold); margin: 20px 0 16px; }
.page-heading p.subtitle { max-width:36.25em; }
.stat { box-shadow: var(--shadow); border-radius: 10px; }
.stat-icon { background: var(--gold-soft); color: var(--gold); border-radius: 50%; }
.stat strong { font-size:1.9375rem; }
.panel, .shelf-card, .wine-card, .auth-card { box-shadow: var(--shadow); }
.wine-card:hover { box-shadow: var(--shadow-hover); border-color: var(--gold); }
.wine-card { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; }
.wine-card .wine-art { flex-shrink: 0; }
.wine-card .wine-body { flex: 1; display: flex; flex-direction: column; }
.wine-card .wine-footer { margin-top: auto; }
.wine-art { background: radial-gradient(ellipse at 50% 25%, var(--art-glow), transparent 70%), var(--art); border-bottom: 1px solid var(--line); }
.wine-art.white { background: radial-gradient(ellipse at 50% 25%, var(--art-glow), transparent 70%), var(--art-white); }
.wine-art.red { background: radial-gradient(ellipse at 50% 25%, var(--art-glow), transparent 70%), var(--art-red); }
.wine-art.rose { background: radial-gradient(ellipse at 50% 25%, var(--art-glow), transparent 70%), var(--art-rose); }
.wine-art .category { background: var(--badge); color: var(--ink); border: 1px solid var(--line); border-radius: 5px; font-size:0.5625rem; padding: 6px 9px; }
.wine-producer { color: var(--gold); font-size:0.625rem; letter-spacing: 1.7px; line-height: 1.5; }
.wine-body { padding: 23px; }
.wine-body h3 { font-size:1.5625rem; }
.wine-footer { border-color: var(--line); }
.wine-footer .stock { color: var(--ink); }
.wine-footer .stock i { color: var(--gold); }
.tag { background: var(--soft); color: var(--muted); padding: 5px 8px; }
.empty { background: var(--soft); border-color: var(--line); }
.empty>i, .shelf-card>i, .location-heading h2 i, .location-heading h3 i { color: var(--gold); }
.tag-picker, .scan-box { background: var(--soft); }
.tag-picker .chip { background: var(--paper); }
.tag-picker .chip.chosen { background: var(--gold-soft); color: var(--ink); opacity: 1; }
.lookup-item { background: var(--soft); }
.notice { background: var(--notice-bg); color: var(--notice-ink); }
.error { background: var(--error-bg); color: var(--red); }
dialog { box-shadow: 0 30px 100px #0005; }
dialog::backdrop { background: #0d1615a6; backdrop-filter: blur(5px); }
.millesime-option input[role=switch] { background: var(--switch-track); }
.millesime-option input[role=switch]:checked { background: var(--primary); }
.millesime-option input[role=switch]:checked:before { background: var(--on-primary); }
.auth-page { background: radial-gradient(ellipse at 20% 20%, var(--glow), transparent 65%), var(--bg); padding-top: 85px; padding-bottom: 45px; }
.auth-card { border-top: 2px solid var(--gold); padding: 42px; border-radius: 16px; }
.auth-card .brand { margin-bottom: 46px; }
.auth-card h1 { font-size:2.625rem; line-height: 1.15; }
.auth-card .primary { margin-top: 24px; }
#toast { background: var(--primary); color: var(--on-primary); border: 1px solid var(--line); }
@media (max-width:71.875em) {
  .stat strong { font-size:1.6875rem; }
}
@media (max-width:47.5em) {
  .topbar { gap: 12px; letter-spacing: 1px; }
  .topbar>span:first-child { display: none; }
  .topbar-right { text-align: left; max-width: 100%; margin-left: 0; margin-right: auto; font-size:0.6875rem; letter-spacing: .4px; }
  .sidebar { background: var(--paper); }
  nav a { padding: 8px 2px; }
  .page-heading { padding-bottom: 20px; margin-bottom: 24px; gap: 12px; }
  .page-heading h1 { font-size:2.1875rem; }
  .page-heading h1::after { margin: 16px 0 13px; width: 32px; }
  .page-heading>.primary { font-size:0.6875rem; }
  .eyebrow { font-size:0.5625rem; letter-spacing: 1.8px; }
  .wine-body { padding: 15px; }
  .wine-body h3 { font-size:1.3125rem; }
  .wine-producer { font-size:0.5625rem; letter-spacing: .7px; }
  .wine-art .category { font-size:0.5rem; padding: 5px 7px; }
  .stat { padding: 14px 12px; }
  .stat strong { font-size:1.625rem; }
  .auth-card { padding: 28px; }
  .auth-card h1 { font-size:2.25rem; }
}