:root { --accent: #ff5a1f; --on-accent: #050505; }

/* Accent on primary buttons and key numbers. */
.site-cta, button.b:not(.g), .home-data-cta, .m-cta > .book {
  background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }
.site-cta:hover, button.b:not(.g):hover, .home-data-cta:hover { filter: brightness(1.08); }
.total .v { color: var(--accent); }
.bar i, .prog i.on { background: var(--accent) !important; }
.opt.sel, .chip.sel { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }
input[type=range] { accent-color: var(--accent) !important; }

/* Toggle in the nav. */
.aidv-theme-toggle { font: 400 11px var(--font-mono, "IBM Plex Mono"), monospace; letter-spacing: .14em; text-transform: uppercase;
  background: transparent; color: inherit; opacity: .7; border: 1px solid currentColor; border-radius: 999px; padding: 3px 10px; cursor: pointer; margin-left: 8px; }
.aidv-theme-toggle:hover { opacity: 1; }
.aidv-theme-float { position: fixed; top: 14px; right: 14px; z-index: 9999; color: #f4f4f2; background: rgba(0,0,0,.5); }

/* Light mode: white background, black text. The site is built dark, so light mode inverts the page
   and re-inverts media and accent pieces so photos and the accent color stay true. */
html[data-theme="light"] { background: #fff; filter: invert(1) hue-rotate(180deg); color-scheme: light; }
html[data-theme="light"] :is(img, video, iframe, picture) { filter: invert(1) hue-rotate(180deg); }
html[data-theme="light"] :is(.site-cta, button.b:not(.g), .home-data-cta, .m-cta > .book, .opt.sel, .chip.sel, .bar i, .prog i.on) { filter: invert(1) hue-rotate(180deg); }
html[data-theme="light"] .total .v { filter: invert(1) hue-rotate(180deg); }

/* ---- Contrast pass (WCAG AA). Rules are written in dark-mode terms; light mode inverts them. ---- */
:root { --accent-text: #ff6a33; --edge: rgba(244,244,242,.5); --edge-strong: rgba(244,244,242,.85); }
html[data-theme="light"] { --accent-text: #a63508; }

/* Secondary / ghost buttons (Back, etc.): visible fill, solid border, raised. */
button.g, button.b.g {
  background: rgba(244,244,242,.10) !important; color: #f4f4f2 !important;
  border: 1.5px solid var(--edge-strong) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 3px rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.35) !important; }
button.g:hover, button.b.g:hover { background: rgba(244,244,242,.18) !important; border-color: #f4f4f2 !important; }
button.g:focus-visible, button.b:focus-visible, .opt:focus-visible, .chip:focus-visible, .site-cta:focus-visible
  { outline: 2px solid var(--accent) !important; outline-offset: 3px; }
/* Disabled primary stays readable as "not yet". */
button.b:disabled { opacity: .55 !important; }

/* Answer cards and chips: unselected borders at 3:1+. */
.opt, .chip, .src { border-color: var(--edge) !important; }
.opt:hover, .chip:hover { border-color: var(--edge-strong) !important; }
.opt small { color: rgba(244,244,242,.72) !important; }
.chip { color: rgba(244,244,242,.85) !important; }
.opt.sel small { color: rgba(5,5,5,.75) !important; }

/* Inputs. */
input:not([type=range]):not([type=checkbox]):not([type=radio]), textarea, select { border-color: rgba(244,244,242,.6) !important; }
input::placeholder, textarea::placeholder { color: rgba(244,244,242,.62) !important; }

/* Casey visualizer switch (Circle / Line / Bars). */
.viz-switch button { color: rgba(244,244,242,.72) !important; }
.viz-switch button.is-on, .viz-switch button:hover { color: #f4f4f2 !important; }

/* Nav: neutral readable links, orange on hover/focus, current page solid orange with underline. */
.site-links a, nav.links a { color: rgba(244,244,242,.8) !important; opacity: 1 !important; }
.site-links a:hover, .site-links a:focus-visible, nav.links a:hover, nav.links a:focus-visible,
.site-links a[aria-current="page"], nav.links a.on {
  color: var(--accent-text) !important; border-bottom: 2px solid var(--accent-text) !important; text-decoration: none !important; }
.site-links a[aria-current="page"], nav.links a.on { font-weight: 600 !important; }
html[data-theme="light"] :is(.site-links a:hover, .site-links a:focus-visible, nav.links a:hover, nav.links a:focus-visible, .site-links a[aria-current="page"], nav.links a.on)
  { filter: invert(1) hue-rotate(180deg); }
.aidv-theme-toggle { opacity: 1 !important; color: rgba(244,244,242,.85) !important; border-color: var(--edge-strong) !important; }

/* Key number: orange text that stays AA on white in light mode. */
.total .v { color: var(--accent-text) !important; }