/* ============================================================
   ARQ & LINK — Semantic color aliases
   Use THESE in product UI, not the raw scale values.
   ============================================================ */

:root {
  --color-primary:        var(--teal-500);
  --color-primary-hover:  var(--teal-600);
  --color-primary-active: var(--teal-700);
  --color-accent:         var(--coral-500);
  --color-accent-hover:   var(--coral-600);

  --bg:            var(--white);
  --bg-subtle:     var(--ink-50);
  --bg-muted:      var(--ink-100);
  --surface:       var(--white);
  --border:        var(--ink-200);
  --border-strong: var(--ink-300);

  --text:            var(--ink-800);
  --text-muted:      var(--ink-500);
  --text-subtle:     var(--ink-400);
  --text-on-primary: var(--white);
  --link:            var(--teal-700);
  --link-hover:      var(--teal-800);

  /* focus ring */
  --ring: var(--teal-200);
}