/* Dark mode — shared token overrides for every page (R21: one concern, one file).
 *
 * How it works: each page's inline :root block stays the light-mode source of
 * truth for the existing tokens. This file adds (a) light defaults for the NEW
 * tokens pages were patched to use, and (b) the dark redefinition of everything
 * under html[data-theme="dark"]. The attribute is set pre-paint by theme.js.
 *
 * Brand rules honored (R1, BRAND_IDENTITY.md):
 * - The quartet (#0089D5 #00B5AC #FFA735 #FE334A) is never altered — dark mode
 *   re-derives SURFACES and TEXT from ink, never the brand colors.
 * - In dark mode --ink becomes near-white, which turns the text wordmark white
 *   next to the untouched 4-color mark — exactly the official white/negative
 *   logo variant ("only the wordmark turns white").
 * - Red stays an accent; solid controls stay neutral (ink-derived), so
 *   "no white text on orange" can't regress here.
 *
 * New tokens and why they exist:
 * - --solid-bg / --solid-fg / --solid-bg-hover: light mode fills chips, primary
 *   buttons and pressed states with ink + white text. Ink IS the dark card
 *   color, so those controls would vanish in dark mode — they flip to a
 *   light fill with dark text instead (the standard high-contrast treatment).
 * - --on-tint-*: dark text shades used on the pastel tint chips in light mode
 *   (e.g. #00847D on --tint-teal). On dark translucent tints they flip to the
 *   light end of the same hue so the chip stays legible.
 */

:root {
  color-scheme: light;

  --solid-bg: var(--ink);
  --solid-fg: #ffffff;
  --solid-bg-hover: #2a343b;

  --on-tint-teal: #00847d;
  --on-tint-blue: #0072b0;
  --on-tint-orange: #8a5410;
  --on-tint-red: #b3132a;
}

html[data-theme='dark'] {
  color-scheme: dark;

  /* Text scale — ink flips to the light end of its own ramp. */
  --ink: #edf3f6;
  --ink-secondary: #a9b4bb;
  --ink-muted: rgba(237, 243, 246, 0.48);
  --hairline: rgba(237, 243, 246, 0.1);

  /* Surfaces — derived from ink #1B2328: page darker than ink, card = ink. */
  --surface-page: #10161a;
  --surface-tint: #171f25;
  --surface-card: #1b2328;
  --shadow-card: 0 20px 70px rgba(0, 0, 0, 0.55);

  --hero-gradient: radial-gradient(
    ellipse at left bottom,
    #17222e 0%,
    #17222e 14%,
    #141b21 56%,
    #10161a 100%
  );

  /* Tints — the same quartet, translucent over dark instead of pastel. */
  --tint-teal: rgba(0, 181, 172, 0.14);
  --tint-teal-border: rgba(0, 181, 172, 0.38);
  --tint-blue: rgba(0, 137, 213, 0.16);
  --tint-blue-border: rgba(0, 137, 213, 0.4);
  --tint-orange: rgba(255, 167, 53, 0.14);
  --tint-orange-border: rgba(255, 167, 53, 0.38);
  --tint-red: rgba(254, 51, 74, 0.14);
  --tint-red-border: rgba(254, 51, 74, 0.38);

  --solid-bg: #edf3f6;
  --solid-fg: #14191d;
  --solid-bg-hover: #d5dfe5;

  --on-tint-teal: #5fd6ce;
  --on-tint-blue: #6fc3ee;
  --on-tint-orange: #ffc06a;
  --on-tint-red: #ff8d9a;
}

/* Theme toggle button — shared control, pages only supply the markup:
 * <button class="theme-toggle" data-theme-toggle aria-label="…">(two svgs)</button>
 * Icon choice is pure CSS so theme.js never touches the DOM inside the button. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle:hover {
  background: var(--surface-tint);
}
.theme-toggle .theme-icon-moon {
  display: block;
}
.theme-toggle .theme-icon-sun {
  display: none;
}
html[data-theme='dark'] .theme-toggle .theme-icon-moon {
  display: none;
}
html[data-theme='dark'] .theme-toggle .theme-icon-sun {
  display: block;
}

/* Appearance picker (profile page): three pills, aria-pressed marks the mode. */
.theme-pick {
  display: inline-flex;
  gap: 8px;
}
.theme-pick button {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
}
.theme-pick button[aria-pressed='true'] {
  background: var(--solid-bg);
  color: var(--solid-fg);
  border-color: var(--solid-bg);
}