/* ─────────────────────────────────────────────────────────────────────
   SEMANTIC TOKENS (Layer 2)
   Purpose-named aliases composed from primitives. Theme-aware.
   Component selectors should consume these (or component tokens),
   never primitives directly.
   ───────────────────────────────────────────────────────────────────── */

:root,
[data-theme="dark"] {
  /* Surfaces */
  --color-surface-page:     var(--black);
  --color-surface-elevated: var(--gray-950);
  --color-surface-card:     var(--gray-900);

  /* Text */
  --color-text-default:  var(--gray-100);
  --color-text-muted:    var(--gray-500);
  --color-text-faint:    var(--gray-700);

  /* Borders / dividers */
  --color-border-default: var(--gray-800);

  /* Brand / interactive */
  --color-brand:                    var(--teal-500);
  --color-interactive-primary:      var(--teal-500);
  /* @future: target token for 7 color-on-accent sites tracked in
     /website-jaspr/TODO_TOKENS.md. Migrate when --color-brand and
     --color-interactive-primary diverge. */
  --color-interactive-primary-text: var(--black);

  /* Status accents */
  --color-status-warm: var(--orange-500);
  --color-status-cool: var(--blue-400);

  /* Effects */
  --color-shadow-rgb: 0,0,0;
  --shadow-card:     0 24px 60px -30px rgba(var(--color-shadow-rgb), 0.7);
  --grid-fade:       radial-gradient(ellipse 1200px 600px at 85% -10%,
                       color-mix(in srgb, var(--color-brand) 7%, transparent),
                       transparent 60%);

  /* Border shorthands (mix width + semantic colour) */
  --border-rule:   1px solid var(--color-border-default);
  --border-accent: 2px solid var(--color-brand);
}

[data-theme="light"] {
  --color-surface-page:     var(--cream-50);
  --color-surface-elevated: var(--cream-100);
  --color-surface-card:     var(--white);

  --color-text-default: var(--cream-900);
  --color-text-muted:   var(--cream-800);
  --color-text-faint:   var(--cream-700);

  --color-border-default: var(--cream-200);

  --color-brand:                    var(--teal-700);
  --color-interactive-primary:      var(--teal-700);
  --color-interactive-primary-text: var(--cream-50);

  --color-status-warm: var(--orange-700);
  --color-status-cool: var(--blue-700);

  --color-shadow-rgb: 28,32,38;
  --shadow-card:     0 18px 40px -16px rgba(var(--color-shadow-rgb), 0.14);
  /* --grid-fade and border shorthands inherit; their primitives are
     already theme-aware via --color-brand and --color-border-default. */
}

/* All deprecated aliases removed — Phase 3 migration complete. */