/* MODU-WALL — Semantic color aliases
   Map the raw palette onto meaning. Reference these in components, not the raw scale. */

:root {
  /* Brand shortcuts */
  --brand-blue: var(--navy-700);
  --brand-gold: var(--gold-500);
  --brand-grey: var(--grey-100);

  /* Text */
  --text-strong:   var(--navy-800);   /* headings, high-emphasis */
  --text-body:     var(--grey-800);   /* default paragraph */
  --text-muted:    var(--grey-600);   /* secondary / captions */
  --text-subtle:   var(--grey-500);   /* placeholder, disabled labels */
  --text-inverse:  var(--white);      /* on navy / dark surfaces */
  --text-on-gold:  var(--navy-800);   /* text sitting on gold */
  --text-link:     var(--navy-600);
  --text-accent:   var(--gold-700);   /* gold used as readable text on light */

  /* Surfaces */
  --surface-page:     var(--white);
  --surface-subtle:   var(--grey-50);
  --surface-muted:    var(--grey-100);
  --surface-card:     var(--white);
  --surface-inverse:  var(--navy-700);
  --surface-inverse-deep: var(--navy-800);
  --surface-accent:   var(--gold-500);
  --surface-accent-soft: var(--gold-100);

  /* Borders */
  --border-subtle:  var(--grey-200);
  --border-default: var(--grey-300);
  --border-strong:  var(--grey-400);
  --border-inverse: var(--navy-500);
  --border-focus:   var(--navy-500);

  /* Interactive — primary (navy) */
  --action-primary:        var(--navy-700);
  --action-primary-hover:  var(--navy-800);
  --action-primary-active: var(--navy-900);

  /* Interactive — accent (gold) */
  --action-accent:        var(--gold-500);
  --action-accent-hover:  var(--gold-600);
  --action-accent-active: var(--gold-700);

  /* Focus ring */
  --ring: 0 0 0 3px color-mix(in srgb, var(--navy-500) 45%, transparent);
  --ring-accent: 0 0 0 3px color-mix(in srgb, var(--gold-500) 55%, transparent);
}