:root {
  --theme-cloth:#F5EACF;
  --theme-cloth-alt:#E9DCBC;
  --theme-shadow:#2B2B2B;
  --theme-accent:#7E6BA9;
  --theme-accent2:#E0B25B;
  --theme-link:#0A6DB8; /* new link accent */
  --theme-success:#259b52; /* success / positive accent */
  --theme-danger:#D45555;
  --theme-text:#222;
  --theme-bg:#F0E6D2;
  --theme-tag:#7A9C55;
  --border-thick:4px;
  --shadow-offset:6px;
  --transition:120ms cubic-bezier(.4,.0,.2,1);
  /* Map specific legacy palette (kept for gradual migration) */
  --map-red:#ff6b6b;
  --map-teal:#4ecdc4;
  --map-yellow:#ffe66d;
}
html,body {height:100%;margin:0;font-family: 'Segoe UI', -apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif; background:var(--theme-bg); color:var(--theme-text);} 
body { padding: clamp(8px,2vw,20px); }
.nb-surface { border: var(--border-thick) solid var(--theme-shadow); background:var(--theme-cloth); box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--theme-shadow); transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition); }
.nb-surface:hover { transform: translate(calc(var(--shadow-offset)*-0.15), calc(var(--shadow-offset)*-0.15)); box-shadow: calc(var(--shadow-offset)*0.6) calc(var(--shadow-offset)*0.6) 0 0 var(--theme-shadow); }
.theme-btn { cursor:pointer; font-weight:800; font-size:1rem; padding:14px 36px; border-radius:0; background:var(--theme-accent); color:#fff; border:var(--border-thick) solid var(--theme-shadow); box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--theme-shadow); text-transform:uppercase; letter-spacing:1px; }
.theme-btn:hover { background:var(--theme-accent2); color:#111; }
.theme-btn--sm { padding:8px 14px; font-size:.75rem; letter-spacing:.5px; }
.theme-btn--pill { border-radius:40px; }
.badge-tag { background:var(--theme-tag); color:#fff; padding:6px 10px 5px; border:var(--border-thick) solid var(--theme-shadow); font-size:.7rem; font-weight:800; letter-spacing:.5px; display:inline-block; margin:4px 8px 0 0; box-shadow:3px 3px 0 0 var(--theme-shadow); text-transform:uppercase; }
.badge-tag.alt { background:var(--theme-accent); }
.link-pill { text-decoration:none; padding:10px 16px 9px; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; border:var(--border-thick) solid var(--theme-shadow); box-shadow:4px 4px 0 0 var(--theme-shadow); background:var(--theme-accent); color:#fff; display:inline-flex; align-items:center; gap:6px; }
.link-pill:hover { background:var(--theme-tag); color:#fff; }
.link-pill.alt { background:var(--theme-accent2); color:#111; }
.link-pill.alt:hover { background:var(--theme-accent); color:#fff; }
.distance-chip { background:var(--theme-accent2); color:#111; padding:10px 18px 8px; font-weight:900; font-size:.85rem; border:var(--border-thick) solid var(--theme-shadow); letter-spacing:1px; box-shadow:4px 4px 0 0 var(--theme-shadow); display:inline-block; }
.loading-box { text-align:center; padding:60px 10px; border:var(--border-thick) dashed var(--theme-shadow); background:var(--theme-cloth-alt); font-weight:700; }
.error-box { background:#FDE4E4; color:var(--theme-shadow); padding:18px 20px; border:var(--border-thick) solid var(--theme-danger); box-shadow:6px 6px 0 0 var(--theme-shadow); font-weight:700; }
.no-results-box { text-align:center; padding:50px 10px; background:var(--theme-cloth-alt); border:var(--border-thick) solid var(--theme-shadow); box-shadow:var(--shadow-offset) var(--shadow-offset) 0 0 var(--theme-shadow); font-weight:700; }
.success-box { background: var(--theme-cloth-alt); color: var(--theme-success); padding:18px 20px; border:var(--border-thick) solid var(--theme-success); box-shadow:6px 6px 0 0 var(--theme-shadow); font-weight:700; }
/* Screen reader only utility */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Filter panel & map specific reusable classes */
.filter-panel { background:var(--theme-cloth-alt); padding:16px 18px 18px; border:var(--border-thick) solid var(--theme-shadow); box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--theme-shadow); margin:0 0 18px; }
.filter-panel h4 { margin:0 0 10px; font-size:.8rem; letter-spacing:.5px; text-transform:uppercase; font-weight:800; color:#333; }

/* Tab system */
.tab-bar { display:flex; gap:0; border:var(--border-thick) solid var(--theme-shadow); background:var(--theme-accent2); box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--theme-shadow); margin:0 0 16px; }
.tab-btn { flex:1; background:var(--theme-cloth); border:0; border-right:var(--border-thick) solid var(--theme-shadow); padding:12px 10px; font-weight:800; font-size:.75rem; letter-spacing:.5px; cursor:pointer; text-transform:uppercase; }
.tab-btn:last-child { border-right:0; }
.tab-btn[aria-selected="true"] { background:var(--theme-accent); color:#fff; }
.tab-panel { display:none; }
.tab-panel[aria-hidden="false"] { display:block; }

/* Accessibility focus ring */
:focus-visible { outline:3px solid var(--theme-accent2); outline-offset:2px; }

/* Popup content (map markers) */
.popup-box { min-width:200px; font-size:.75rem; line-height:1.4; }
.popup-box b { font-weight:800; }
.popup-link { color: var(--theme-link); text-decoration:none; font-weight:700; }
.popup-link:hover, .popup-link:focus-visible { text-decoration:underline; }
.popup-link--site { color: var(--theme-success); }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .nb-surface:hover, .theme-btn:hover, .tab-btn:hover { transform:none !important; box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--theme-shadow); }
}

/* Dark theme tokens (opt‑in via [data-theme="dark"]) */
[data-theme="dark"] {
  --theme-cloth:#2E2B26;
  --theme-cloth-alt:#3A362F;
  --theme-shadow:#0E0E0E;
  --theme-accent:#9B8AD4;
  --theme-accent2:#D6A040;
  --theme-link:#5CAEE8;
  --theme-success:#4FBF76;
  --theme-danger:#E07070;
  --theme-text:#F5F3EF;
  --theme-bg:#26231F;
  --theme-tag:#6DA04A;
}
[data-theme="dark"] body { background: var(--theme-bg); color: var(--theme-text); }
[data-theme="dark"] .nb-surface, [data-theme="dark"] .filter-panel { background:var(--theme-cloth); }