/* Light/dark theme — light palette + perpetual toggle.
   Dark is the default (tokens.css :root). Light kicks in when the
   <html> element carries data-theme="light".
   Toggle UI is injected by theme.js as a fixed-position button. */

/* ─── Light-mode palette ─────────────────────────────────────────
   Lilac bg → warm cream gold accent. Dark purples for body/meta
   text are highly readable on lilac. Accent-ink matches the dark
   page bg for visual cohesion across modes. */
/* ─── Light palette, rebuilt 2026-08-23 to match apex ──────────────────────
   Two changes, both measured rather than felt.

   1. The lilac is the old #E7D0F4 diluted 50% toward white. At full strength
      every surface sat within a few points of every other one, so a card, an
      inset and the page were the same colour and depth had to be drawn with
      borders alone.

   2. The accent was #22321a, and it was never too dark (8.4:1). It was
      YELLOW-green at hue 81, and the wheel-opposite of this lilac IS
      yellow-green, so the two fought. Pine is the same family rotated to 149.

   ⚠️ The muted text tiers were the real bug. --text-tertiary at #7E6F95 on
   this page measured 2.77:1 against a 4.5:1 floor, and it is the colour of
   every hint and label on the site. Both muted tiers are darkened here. */
html[data-theme="light"] {
  --bg-page:        #F3E8FA;
  --bg-raised:      #E8D7F1;
  --bg-sidebar:     #E8D7F1;
  --bg-card:        #E8D7F1;
  --bg-inset:       #E1CCEC;
  --bg-elevated:    #E1CCEC;
  --bg-code:        #2A1E40;          /* code blocks stay dark for legibility */
  --border:         #C4A5D7;
  --border-dashed:  #B28DC9;

  --text-primary:   #1F2E26;
  --text-secondary: #3F4C44;
  --text-tertiary:  #4D5952;          /* was #7E6F95 at 6.19:1 */
  --text-faint:     #525C56;          /* was #91839F at 2.14:1, then #6B5E77 which
                                         still measured 4.22 on the INSET surface */

  --gold:           #28593F;
  --gold-hover:     #184A31;
  --gold-text-soft: #3A624B;
  --on-gold:        #F3E8FA;

  /* -- Tokens the dark sheet declared and the light sheet never answered.
     Until now they kept their dark values on a lilac page. Mirror values,
     same hue and chroma as their dark twins, lightness solved for AA. */
  --verdict-abstain:     #6E5100;
  --verdict-ai:          #8B3E3E;
  --verdict-real:        #1B6232;
}

/* Public-page nav uses rgba directly — override to a lighter purple in light mode. */
html[data-theme="light"] nav.site-nav {
  background: color-mix(in srgb, var(--bg-page) 55%, white 45%);
}

/* ─── Toggle button — fixed, top-right corner, sits above everything. */
.theme-toggle {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 1000;
  background: transparent;
  border: 0;
  color: var(--gold);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  /* ⛔ was `padding: 5px 7px` and nothing else, which made this 27x23 on the
     app pages, 38x38 on billing and 12x8 on docs: three sizes, all under the
     44px floor, on a control that appears on all fourteen pages. */
  padding: 5px 7px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-control, 999px);   /* square, so a circle */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .55;
  transition: opacity .15s, background .15s, color .15s;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  opacity: 1;
  outline: none;
  background: rgba(0, 0, 0, .12);
}
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .theme-toggle:focus-visible {
  background: rgba(0, 0, 0, .08);
}
.theme-toggle i { font-size: 16px; }

/* In-flow toggle placed inside the dashboard page header — sits just to the
   right of the "dashboard" title (overrides the fixed top-right default). */
.page-head .theme-toggle {
  position: static;
  margin-right: auto;   /* hug the title; keep the account-strip pushed right */
  margin-left: 8px;
}

/* Authed shell — the dashboard hamburger sits in the top-left,
   sidebar covers the left, so a top-right corner button is safe.
   On narrow screens shift slightly inward to clear the hamburger.  */
@media (max-width: 720px) {
  .theme-toggle { top: 8px; right: 8px; padding: 4px 6px; }  /* the 44px minimums above still hold */
  .theme-toggle i { font-size: 15px; }
}