/* Rotax Asia — theme layer.
   Dark stays the brand default (each page's own :root defines it). Here we add:
     • --nav-bg, a token for the sticky nav background (was hard-coded per page), and
     • the Light palette, applied when the user picks Light OR when they're on Auto
       and their OS prefers light. White is an official brand colour, so light mode
       keeps red/black/white and only remaps the neutral tokens.
   The tokens are named after their dark values (--black, --white, --dark…), but are
   used semantically (page bg = --black, text = --white), so remapping the values is
   all that's needed — no markup changes. Brand accents (--red/--green/--blue) hold. */

/* color-scheme makes the browser theme NATIVE controls too — the <select> popup,
   its highlight, date pickers and scrollbars — so they match the page instead of
   showing a bright default-light dropdown on our dark UI (esp. on mobile). */
:root { --nav-bg: rgba(10, 10, 10, 0.92); color-scheme: dark; }   /* dark default */

/* Light palette — shared by the two triggers below */
:root[data-theme="light"] {
  color-scheme: light;
  --black:  #EAECF0;   /* page background   */
  --dark:   #FFFFFF;   /* panels / cards    */
  --mid:    #FFFFFF;   /* inputs            */
  --line:   #D6DAE1;   /* borders           */
  --muted:  #5B6472;   /* secondary text    */
  --silver: #3C4555;
  --white:  #0B0C0E;   /* primary text      */
  --nav-bg: rgba(255, 255, 255, 0.9);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --black:  #EAECF0;
    --dark:   #FFFFFF;
    --mid:    #FFFFFF;
    --line:   #D6DAE1;
    --muted:  #5B6472;
    --silver: #3C4555;
    --white:  #0B0C0E;
    --nav-bg: rgba(255, 255, 255, 0.9);
  }
}

/* ── Theme toggle button (lives in the nav) ──────────────────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--line); color: var(--silver);
  font-family: 'PP Monument Extended', sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 10px; line-height: 1; cursor: pointer; transition: border-color .2s, color .2s;
}
.theme-toggle:hover { border-color: var(--red); color: var(--red); }
.theme-toggle svg { width: 15px; height: 15px; display: block; flex: none; }
@media (max-width: 600px) {
  /* Icon-only, borderless on phones — the nav is tight next to Account / Sign out */
  .theme-toggle { padding: 2px; border: none; }
  .theme-toggle .tt-label { display: none; }
  .theme-toggle svg { width: 19px; height: 19px; }
}