/* =========================================================================
   TIER 2 — THEME / SEMANTIC
   "Jobs to do" tokens. Components always consume these, never tier 1.
   Theming (dark mode, high-contrast, seasonal accents) happens HERE,
   by re-pointing theme tokens at different primitives.
   ========================================================================= */

:root {
  /* -----------------------------------------------------------------------
     Backgrounds
     ----------------------------------------------------------------------- */

  --theme-color-background-default: var(--color-cream-100);
  --theme-color-background-subtle: var(--color-cream-200);
  --theme-color-background-surface: var(--color-cream-50);
  --theme-color-background-inverse: var(--color-charcoal-900);
  --theme-color-background-brand-quiet: var(--color-forest-500);
  --theme-color-background-brand-warm: var(--color-sun-500);

  /* -----------------------------------------------------------------------
     Text
     ----------------------------------------------------------------------- */

  /* WCAG AA targets on cream backgrounds (cream-50..200).
     default + muted both exceed 7:1 contrast; soft is label-only. */
  --theme-color-text-default: var(--color-charcoal-900);
  --theme-color-text-muted: var(--color-charcoal-700);
  --theme-color-text-soft: var(--color-charcoal-500);
  --theme-color-text-heading: var(--color-charcoal-900);
  --theme-color-text-inverse: var(--color-cream-100);
  --theme-color-text-link: var(--color-ember-500);
  --theme-color-text-link-hover: var(--color-crimson-500);
  --theme-color-text-link-visited: var(--color-ember-700);

  /* -----------------------------------------------------------------------
     Borders and dividers
     ----------------------------------------------------------------------- */

  --theme-color-border-subtle: var(--color-charcoal-100);
  --theme-color-border-default: var(--color-charcoal-300);
  --theme-color-border-strong: var(--color-charcoal-500);
  --theme-color-border-focus: var(--color-sun-500);
  --theme-color-border-brand: var(--color-leaf-500);

  /* -----------------------------------------------------------------------
     Brand accents (for use, not decoration)
     ----------------------------------------------------------------------- */

  --theme-color-brand-primary: var(--color-sun-500);
  --theme-color-brand-secondary: var(--color-leaf-500);
  --theme-color-brand-emphasis: var(--color-ember-500);
  --theme-color-brand-quiet: var(--color-forest-500);
  --theme-color-accent-warning: var(--color-crimson-500);       /* sparingly */
  --theme-color-accent-introspective: var(--color-plum-500);     /* sparingly */

  /* -----------------------------------------------------------------------
     Typography roles
     ----------------------------------------------------------------------- */

  --theme-font-family-display: var(--font-family-display);
  --theme-font-family-body: var(--font-family-body);

  --theme-font-size-micro: var(--font-size-50);
  --theme-font-size-small: var(--font-size-100);
  --theme-font-size-body: var(--font-size-200);
  --theme-font-size-lead: var(--font-size-300);
  --theme-font-size-heading-xs: var(--font-size-400);
  --theme-font-size-heading-sm: var(--font-size-500);
  --theme-font-size-heading-md: var(--font-size-600);
  --theme-font-size-heading-lg: var(--font-size-700);
  --theme-font-size-heading-xl: var(--font-size-800);

  --theme-line-height-heading: var(--line-height-tight);
  --theme-line-height-body: var(--line-height-default);
  --theme-line-height-loose: var(--line-height-loose);

  --theme-letter-spacing-heading: var(--letter-spacing-tight);
  --theme-letter-spacing-eyebrow: var(--letter-spacing-wider);

  --theme-font-weight-body: var(--font-weight-regular);
  --theme-font-weight-emphasis: var(--font-weight-semibold);
  --theme-font-weight-heading: var(--font-weight-regular);

  /* -----------------------------------------------------------------------
     Spacing roles
     ----------------------------------------------------------------------- */

  --theme-space-inline-xs: var(--size-100);
  --theme-space-inline-sm: var(--size-200);
  --theme-space-inline-md: var(--size-300);
  --theme-space-inline-lg: var(--size-400);

  --theme-space-stack-xs: var(--size-200);
  --theme-space-stack-sm: var(--size-300);
  --theme-space-stack-md: var(--size-400);
  --theme-space-stack-lg: var(--size-500);
  --theme-space-stack-xl: var(--size-600);

  --theme-space-section: var(--size-700);
  --theme-space-region: var(--size-800);
  --theme-space-chapter: var(--size-900);

  /* -----------------------------------------------------------------------
     Surface treatments
     ----------------------------------------------------------------------- */

  --theme-radius-card: var(--radius-md);
  --theme-radius-surface: var(--radius-lg);
  --theme-radius-soft: var(--radius-xl);
  --theme-radius-pill: var(--radius-pill);

  --theme-shadow-card: var(--shadow-soft);
  --theme-shadow-lifted: var(--shadow-lifted);
  --theme-shadow-floating: var(--shadow-floating);

  /* -----------------------------------------------------------------------
     Content widths
     ----------------------------------------------------------------------- */

  --theme-measure-prose: var(--measure-body);
  --theme-measure-narrow: var(--measure-narrow);
  --theme-measure-wide: var(--measure-wide);

  --theme-container-narrow: var(--container-narrow);
  --theme-container-body: var(--container-body);
  --theme-container-wide: var(--container-wide);
  --theme-container-full: var(--container-full);

  /* -----------------------------------------------------------------------
     Motion
     ----------------------------------------------------------------------- */

  --theme-duration-fast: var(--duration-fast);
  --theme-duration-default: var(--duration-default);
  --theme-easing-default: var(--easing-default);
}

/* Respect user motion preference. Theming hook. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --theme-duration-fast: 0ms;
    --theme-duration-default: 0ms;
  }
}