/* Frank Fleet — one token set for every surface.
   Light is the bare :root. Dark is redefined twice: once behind
   prefers-color-scheme (guarded so an explicit light choice still wins) and
   once behind [data-theme="dark"] so the toggle beats the OS in both
   directions. Never declare a colour only inside one of those blocks. */

/* Tell the BROWSER which theme the page is in, not just our own tokens. Without
   this, Chrome draws its native UI — autofill dropdowns, form controls, scrollbars
   — from the OS setting, so a dark-mode Mac renders a black panel on top of a
   cream page. That was the "grey screen" over the sign-in button. */
:root{ color-scheme: light; }
:root[data-theme="dark"],
:root[data-default="dark"]:not([data-theme="light"]){ color-scheme: dark; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-default="light"]){ color-scheme: dark; }
}

:root{
  --paper:#F4EDE0;
  --card:#FFFDF7;
  --card2:#F8F2E6;
  --line:#DFD5C4;
  --ink:#241B19;
  --mut:#6B5F59;
  --faint:#9B8D86;
  --green:#6D1F2C;
  --green-dim:#F4E4E6;
  --on-green:#FFF9F0;
  --gold:#8A6A12;
  --gold-dim:#F7EDD4;
  --red:#B0332A;
  --red-dim:#F8DFDB;
  --shadow:0 1px 2px rgba(36,27,25,.06);
  --cond:"Barlow Condensed",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#26231F; --card:#2F2B27; --card2:#37322D; --line:#463F39;
    --ink:#F2EBE0; --mut:#A79B92; --faint:#7C7169;
    --green:#D2707F; --green-dim:#3B2A2D; --on-green:#2A1418;
    --gold:#D9B672; --gold-dim:#33291A;
    --red:#F0928A; --red-dim:#3A1E1B;
    --shadow:0 1px 2px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --paper:#26231F; --card:#2F2B27; --card2:#37322D; --line:#463F39;
    --ink:#F2EBE0; --mut:#A79B92; --faint:#7C7169;
    --green:#D2707F; --green-dim:#3B2A2D; --on-green:#2A1418;
    --gold:#D9B672; --gold-dim:#33291A;
    --red:#F0928A; --red-dim:#3A1E1B;
    --shadow:0 1px 2px rgba(0,0,0,.35);
}

/* The driver app opens dark unless told otherwise — it is read at 5:15 am
   in a cab, and a cream screen at that hour is genuinely unusable. */
:root[data-default="dark"]:not([data-theme="light"]):not([data-theme="dark"]){
  --paper:#26231F; --card:#2F2B27; --card2:#37322D; --line:#463F39;
    --ink:#F2EBE0; --mut:#A79B92; --faint:#7C7169;
    --green:#D2707F; --green-dim:#3B2A2D; --on-green:#2A1418;
    --gold:#D9B672; --gold-dim:#33291A;
    --red:#F0928A; --red-dim:#3A1E1B;
    --shadow:0 1px 2px rgba(0,0,0,.35);
}

/* The dispatch board opens LIGHT unless told otherwise, and in a neutral near-white
   rather than the brand cream. It is read on an office screen all day and next to a
   light map; a warm paper fights both. The toggle still wins in either direction. */
:root[data-default="light"]:not([data-theme="dark"]):not([data-theme="light"]),
:root[data-default="light"][data-theme="light"]{
  --paper:#F6F1E7; --card:#FFFFFF; --card2:#FAF6EE; --line:#E1D8C9;
  --ink:#241B19; --mut:#655A55; --faint:#968981;
  --green:#6D1F2C; --green-dim:#F4E4E6; --on-green:#FFF9F0;
  --gold:#8A6A12; --gold-dim:#FBF1D8;
  --red:#B0332A; --red-dim:#FBE3E0;
  --shadow:0 1px 2px rgba(36,27,25,.06);
}

/* ---------- the toggle ---------- */
.themer{
  display:inline-flex;align-items:center;gap:2px;flex:none;
  background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:2px;
}
.themer button{
  all:unset;cursor:pointer;width:30px;height:26px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;color:var(--faint);
  transition:background .15s,color .15s;
}
.themer button[aria-pressed="true"]{background:var(--green);color:var(--on-green)}
.themer button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.themer svg{width:15px;height:15px;display:block}

/* Apple's minimum touch target is 44pt. The pill stays compact under a mouse and
   grows only where a finger is doing the tapping — Mark opens these on a work iPhone. */
@media (pointer:coarse){
  .themer button{width:44px;height:44px}
  .themer{padding:1px}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}