/* Semantic aliases — components reference these, not the raw color tokens. */

:root {
  /* ---- Backgrounds ---- */
  --bg-page: var(--color-parchment);
  --bg-card: var(--color-ivory);
  --bg-card-elevated: var(--color-white);
  --bg-button-secondary: var(--color-warm-sand);
  --bg-button-primary: var(--color-terracotta);
  --bg-button-dark: var(--color-dark-surface);
  --bg-button-white: var(--color-white);
  --bg-dark-page: var(--color-near-black);
  --bg-dark-card: var(--color-dark-surface);

  /* ---- Text ---- */
  --text-primary: var(--color-near-black);
  --text-secondary: var(--color-olive-gray);
  --text-tertiary: var(--color-stone-gray);
  --text-emphasis: var(--color-dark-warm);
  --text-on-dark: var(--color-warm-silver);
  --text-on-dark-strong: var(--color-ivory);
  --text-button: var(--color-charcoal-warm);
  --text-button-primary: var(--color-ivory);
  --text-link: var(--color-terracotta);
  --text-link-dark: var(--color-coral);
  --text-error: var(--color-error);

  /* ---- Borders ---- */
  --border-subtle: var(--color-border-cream);
  --border-default: var(--color-border-warm);
  --border-dark: var(--color-border-dark);

  /* ---- Accents ---- */
  --accent-brand: var(--color-terracotta);
  --accent-brand-hover: var(--color-terracotta-hover);
  --accent-coral: var(--color-coral);
}