/* ============================================================================
   THEME & BUTTON TOKENS
   Sections recolor as a unit. Default theme = light surface / dark text.
   Apply a `u-theme-*` helper (see base/utilities.css) to a section and
   everything inside adapts via these --theme--* variables.
   ========================================================================== */
:root {
  /* Active theme (overridden per section by the u-theme-* helpers) */
  --theme--background: var(--swatch--light);
  --theme--text: var(--swatch--dark);
  --theme--border: var(--swatch--dark-faded);

  /* Buttons — consume the active theme; overridden per variant */
  --button--background: var(--swatch--brand-1);
  --button--text: var(--swatch--brand-1-text);
  --button--border: var(--swatch--brand-1);
  --button--background-hover: var(--swatch--dark);
  --button--text-hover: var(--swatch--light);
  --button--border-hover: var(--swatch--dark);
}