/* Light and dark for the one-screen apps: Tabata, Japanese, Meetup, and the
 * landing page.
 *
 * Those three were built light-only but already had their colours in custom
 * properties, all three with the SAME warm-stone neutrals and only the accent
 * differing. So dark mode is a token override rather than a rewrite, and it
 * lives here once instead of three times.
 *
 * Each app keeps its own light `:root` block (identical values, already
 * there) and adds its own `:root[data-theme="dark"]` for its accent alone.
 * An attribute selector outranks a bare `:root`, so the dark block below wins
 * over the app's light one whatever the source order; the app's own dark block
 * comes later in the document and so wins over this one for the accent.
 *
 * /travel and /freedom have their own richer palettes and are not styled from
 * here. They share the KEY only, so one choice covers every app.
 *
 * Contrast on the dark surface (#232120): text 14.1:1, muted 6.4:1,
 * accents 5.8-8.6:1, and dark ink on an accent fill 6.7-10:1.
 */

:root {
  /* Named here so an app can use them before it has a dark block of its own.
     The neutrals are already declared identically in each app. */
  --accent-ink: #ffffff;
  /* A wash of the INK, for a mark drawn on an accent fill -- a spinner ring
     in the accent colour on an accent button is invisible. */
  --accent-ink-soft: rgba(255, 255, 255, .4);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .05);
  --shadow-lg: 0 4px 16px rgba(15, 23, 42, .18);
  --scrim: rgba(28, 25, 23, .32);
}

:root[data-theme="dark"] {
  --bg:            #1a1917;
  --surface:       #232120;
  --surface-sub:   #2c2a28;
  --border:        #37342f;
  --border-strong: #4b4741;

  --text:    #f2f0ed;
  --muted:   #a8a29e;
  --muted-2: #7b7570;

  /* Dark ink on a light accent fill. One value for all three accents: each
     measures better than 6.7:1 against it. */
  --accent-ink: #141312;
  --accent-ink-soft: rgba(20, 19, 18, .35);

  --danger:        #f87171;
  --danger-soft:   #33161a;
  --danger-border: #5c2a2c;

  /* Shadows have to lean on black in the dark, where a slate tint just makes
     a muddy halo. */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, .55);
  --scrim: rgba(0, 0, 0, .62);
}

/* ------------------------------------------------------------------ toggle */
/* Three states, not two: "system" keeps following the OS when it flips at
   sunset, which a plain light/dark switch cannot do. Same control as the one
   in /travel and /freedom, so the whole suite behaves identically. */
.theme-toggle {
  display: inline-flex; gap: 2px; padding: 2px; flex: none;
  background: var(--surface-sub); border: 1px solid var(--border);
  border-radius: 999px;
}
.theme-toggle button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 22px; padding: 0;
  border: none; background: none; cursor: pointer; border-radius: 999px;
  color: var(--muted-2);
  transition: background .13s, color .13s;
}
.theme-toggle button svg { width: 13px; height: 13px; }
.theme-toggle button:hover { color: var(--text); }
.theme-toggle button.on {
  background: var(--surface); color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .14);
}
:root[data-theme="dark"] .theme-toggle button.on {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

/* The native date, time and select widgets read this to draw themselves. */
:root[data-theme="dark"] input, :root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { color-scheme: dark; }