/* theme.css — one palette, four pages.
 *
 * THE SAME CONSTANT DEFINED IN TWO PLACES WILL DRIFT. That lesson was paid for once already
 * on this project, when the turntable angle list lived in both the sidecar and Program.cs and
 * the two quietly disagreed about which views were being asked for. A palette copied into four
 * <style> blocks is the same trap with a longer fuse: the first person to adjust the accent
 * updates three pages and misses one, and nobody notices until a demo.
 *
 * So every colour, every radius and both typefaces live here. A page that needs a colour asks
 * for a variable; a page that hardcodes a hex has opted out of the theme and will look wrong
 * in light mode.
 *
 * LIGHT MODE IS NOT A PREFERENCE, IT IS A ROOM. A kiosk facing a roller door at 2pm is a
 * mirror in dark mode. Whoever flips it is describing the floor, not their taste, which is why
 * theme.js persists it per device rather than per session.
 */

:root {
  --bg:          #14100d;
  --bg-glow:     #2a231c;
  --scrim:       rgba(20, 16, 13, 0.92);
  --panel:       #1a1611;
  --tile:        #1d1813;
  --tile-2:      #221c16;
  --field:       #100d0a;
  --rule:        #33291f;
  --rule-strong: #4a3d2e;

  --ink:         #f4ede3;
  --ink-soft:    #cfc4b6;
  --ink-faint:   #8a7a66;

  --accent:      #e07b39;
  --accent-dim:  #a85a29;
  --on-accent:   #2a1608;

  --amber:       #d8a657;
  --green:       #7fbb8e;
  --red:         #d87f7f;
  --bg-danger:   #2a1a16;

  --mono:        ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:        system-ui, -apple-system, "Segoe UI", sans-serif;

  /* THE DISPLAY CUT, for hero moments only — the bike's name on the buyer screen, and nothing
     else until a deliberate decision says otherwise. Body copy, controls and labels stay on
     --sans and --mono; a display face used for prose is a menu, not a showroom. The page that
     uses this must also carry the font's <link>; the token only names it, and the fallback
     chain means a kiosk that cannot reach the font CDN degrades to bold condensed system
     type rather than to nothing. */
  --display:     "Bebas Neue", "Arial Narrow", var(--sans);

  --radius:      6px;
  --radius-lg:   10px;
}

:root[data-theme="light"] {
  --bg:          #eee9e1;
  --bg-glow:     #f8f6f2;
  --scrim:       rgba(248, 246, 242, 0.93);
  --panel:       #fbfaf8;
  --tile:        #fbfaf8;
  --tile-2:      #f1ede5;
  --field:       #ffffff;
  --rule:        #d8d1c4;
  --rule-strong: #b9b0a0;

  --ink:         #171410;
  --ink-soft:    #4a443b;
  --ink-faint:   #7d7466;

  --accent:      #d64f1e;
  --accent-dim:  #a33c14;
  --on-accent:   #fff6f1;

  --amber:       #92620d;
  --green:       #2f6b43;
  --red:         #a8342f;
  --bg-danger:   #f7e6e2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

/* ---- type ---- */

h1 { font-size: 22px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
h2 { font-size: 17px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }

.sub { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 32px; line-height: 1.5; }

.note { color: var(--ink-faint); font-size: 12.5px; line-height: 1.6; }
.note[hidden] { display: none; }

.error { color: var(--red); font-size: 13px; line-height: 1.5; }
.error[hidden] { display: none; }

/* A label that reads as a field name rather than as prose. */
.label,
label {
  display: block;
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

/* ---- controls ---- */

button {
  font: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--tile);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
}
button:hover:not(:disabled) { border-color: var(--rule-strong); }
button:disabled { color: var(--ink-faint); cursor: default; }

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
button.primary:hover:not(:disabled) { background: var(--accent-dim); border-color: var(--accent-dim); }

button.danger { color: var(--red); }
button.danger:hover:not(:disabled) { border-color: var(--red); background: var(--bg-danger); }

button.ghost { background: transparent; }

input, select, textarea {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  padding: 8px 11px;
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
}
input[type="checkbox"] { width: auto; }

/* ---- pills, used for years, categories and any other single-choice row ---- */

.pill {
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  width: auto;
}
.pill:hover { color: var(--ink); border-color: var(--rule-strong); }
.pill[aria-pressed="true"] {
  background: var(--tile-2);
  border-color: var(--accent);
  color: var(--ink);
}

/* ---- surfaces ---- */

.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

/* ---- the top bar shared by select.html and admin.html ---- */

.topbar {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--scrim);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
  z-index: 10;
}
.topbar[hidden] { display: none; }

.topbar .spacer { margin-left: auto; }

.topbar .rooftop {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.topbar select { width: auto; font-family: var(--mono); font-size: 11.5px; padding: 4px 8px; }
.topbar button { font-size: 12px; padding: 4px 10px; background: transparent; }

.topbar a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.topbar a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.topbar a[hidden] { display: none; }

/* The toggle is deliberately small and unlabelled. It is set once for the room and then
   ignored; a labelled control invites fiddling mid-conversation. */
.theme-toggle {
  padding: 5px 9px;
  line-height: 1;
  color: var(--ink-faint);
  background: transparent;
  width: auto;
}
.theme-toggle:hover { color: var(--ink); }