/* Taste of Stellenbosch — tokens + shared styles. Maroon, blue and gold; light and dark themes.
   Every text/background pair below clears WCAG AA in both themes. */
:root {
  --maroon: #6B1F2A; --maroon-deep: #4A121B; --maroon-soft: #8A2A38;
  --blue: #1F3A6E; --blue-deep: #142A52;
  --gold: #C9A227; --gold-ink: #6E5200; --gold-soft: #E7C866;
  --bg: #FAF6F0; --surface: #FFFFFF; --surface-2: #F1EAE0; --line: #DDD2C4;
  --text: #1E1519; --muted: #5B4E53; --on-brand: #FFFFFF; --on-gold: #1E1519;
  --brand: var(--maroon); --brand-text: #6B1F2A; --accent-text: var(--gold-ink); --blue-text: #1F3A6E;
  --ok: #1F6B3A; --ok-bg: #DDF1E3; --warn: #7A4B00; --warn-bg: #FBECC8; --bad: #9B1C1C; --bad-bg: #FCE1E1;
  --shadow: 0 8px 30px rgba(30, 21, 25, .12); --shadow-sm: 0 2px 8px rgba(30, 21, 25, .10);
  --r-sm: 8px; --r: 14px; --r-lg: 22px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --fs-xs: .8rem; --fs-sm: .9rem; --fs: 1rem; --fs-lg: 1.2rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-hero: clamp(3rem, 6vw, 4.5rem);
  --serif: Georgia, 'Times New Roman', serif; --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #140C10; --surface: #1F1419; --surface-2: #2A1C22; --line: #43323A;
  --text: #F5EFE8; --muted: #BCAEB3; --brand-text: #F0A3AF; --accent-text: #E7C866; --blue-text: #9FB8EA;
  --ok: #8FDCA8; --ok-bg: #163A25; --warn: #F1C46B; --warn-bg: #4A3208; --bad: #F4A3A3; --bad-bg: #4E1A1A;
  --shadow: 0 8px 30px rgba(0, 0, 0, .45); --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: var(--fs); line-height: 1.55; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--brand-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-text); }
h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.12; margin: 0 0 var(--s-3); letter-spacing: -.01em; color: var(--text); }
h1 { font-size: var(--fs-hero); letter-spacing: -.02em; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
p { margin: 0 0 var(--s-3); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.eyebrow { font-family: var(--sans); text-transform: uppercase; letter-spacing: .14em; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-text); margin-bottom: var(--s-2); }
.money, .price { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.25em; height: 1.25em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; flex: none; }
.wrap { width: min(1180px, 100% - var(--s-8)); margin: 0 auto; }
@media (max-width: 720px) { .wrap { width: min(1180px, 100% - var(--s-5)); } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-5); border-radius: 999px; border: 2px solid transparent; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .12s, background .15s, color .15s, border-color .15s; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.btn-primary { background: var(--maroon); color: var(--on-brand); }
.btn-primary:hover { background: var(--maroon-soft); color: var(--on-brand); }
.btn-gold { background: var(--gold); color: var(--on-gold); }
.btn-gold:hover { background: var(--gold-soft); color: var(--on-gold); }
.btn-blue { background: var(--blue); color: var(--on-brand); }
.btn-blue:hover { background: var(--blue-deep); color: var(--on-brand); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--text); color: var(--text); }
.btn-light { background: #FFFFFF; color: #6B1F2A; }
.btn-light:hover { background: #F1EAE0; color: #4A121B; }
.btn-on-dark, .btn-on-dark:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, .6); background: transparent; }
.btn-on-dark:hover { border-color: #FFFFFF; }
.btn-sm { min-height: 44px; padding: 0 var(--s-4); font-size: var(--fs-sm); }
.btn-icon { width: 48px; height: 48px; padding: 0; border-radius: 50%; }

/* Chips / badges */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s-4); border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer; transition: all .15s; }
.chip:hover { border-color: var(--maroon-soft); }
.chip[aria-pressed="true"] { background: var(--maroon); border-color: var(--maroon); color: var(--on-brand); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; line-height: 1.5; }
.badge-maroon { background: var(--maroon); color: var(--on-brand); }
.badge-blue { background: var(--blue); color: var(--on-brand); }
.badge-gold { background: var(--gold); color: var(--on-gold); }
.badge-soft { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-bad { background: var(--bad-bg); color: var(--bad); }
.tag { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: var(--fs-xs); background: var(--surface-2); color: var(--text); border: 1px solid var(--line); white-space: nowrap; }

/* Cards & layout */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.card-pad { padding: var(--s-5); }
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.section { padding: var(--s-8) 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); }
.section-head h2 { margin: 0; }
@media (max-width: 720px) { .section { padding: var(--s-7) 0; } }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-4); }
.field label, .field .lbl { font-weight: 700; font-size: var(--fs-sm); }
.field .hint { font-size: var(--fs-xs); color: var(--muted); }
.field .err { font-size: var(--fs-sm); color: var(--bad); display: none; }
.field.invalid .err { display: block; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--bad); }
input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-sm); min-height: 48px; padding: 10px 14px; width: 100%; }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(31, 58, 110, .2); }
.form-row { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.error-summary { background: var(--bad-bg); color: var(--bad); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.notice { background: var(--surface-2); border-left: 4px solid var(--gold); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); }
.notice-warn { border-left-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.check { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: var(--fs-sm); }
.check input { width: 22px; height: 22px; min-height: 0; padding: 0; }

/* States */
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: var(--r-sm); min-height: 18px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.state { text-align: center; padding: var(--s-7) var(--s-4); border: 1px dashed var(--line); border-radius: var(--r); }
.state p { margin-bottom: var(--s-4); }

/* Table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 640px; }
table.data th, table.data td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { position: sticky; top: 0; background: var(--surface-2); font-weight: 700; white-space: nowrap; z-index: 1; }
table.data th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; min-height: 32px; }
table.data tr:last-child td { border-bottom: 0; }
.table-tools { display: flex; gap: var(--s-3); align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--s-3); }
.table-tools input { max-width: 320px; }
.pager { display: flex; gap: var(--s-2); align-items: center; justify-content: flex-end; margin-top: var(--s-3); }

/* Toast + dialog */
.toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 1000; width: min(480px, calc(100% - 32px)); }
.toast { background: var(--text); color: var(--bg); padding: 12px 16px; border-radius: var(--r-sm); box-shadow: var(--shadow); display: flex; gap: 10px; align-items: center; font-size: var(--fs-sm); }
.toast-ok { background: var(--ok); color: #FFFFFF; }
[data-theme="dark"] .toast-ok { background: #1F6B3A; }
.toast-bad { background: var(--bad); color: #FFFFFF; }
[data-theme="dark"] .toast-bad { background: #9B1C1C; }
dialog.dlg { border: 0; border-radius: var(--r-lg); padding: 0; background: var(--surface); color: var(--text); box-shadow: var(--shadow); width: min(560px, calc(100% - 32px)); }
dialog.dlg::backdrop { background: rgba(20, 12, 16, .6); }
dialog.dlg .dlg-body { padding: var(--s-6); }
dialog.dlg .dlg-actions { display: flex; gap: var(--s-3); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--s-5); }

/* Theme toggle */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.theme-toggle:hover { border-color: var(--gold); }