/* ============================================================
   Kota Batu — Semantic Color Aliases
   Use THESE in components, not the raw palette ramps.
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --brand-primary:        var(--green-600);
  --brand-primary-hover:  var(--green-700);
  --brand-primary-active: var(--green-800);
  --brand-primary-subtle: var(--green-50);
  --brand-secondary:      var(--gold-500);
  --brand-secondary-hover:var(--gold-600);
  --brand-secondary-subtle: var(--gold-50);
  --brand-on-primary:     var(--color-white);
  --brand-on-secondary:   var(--neutral-950);

  /* ---- Text ---- */
  --text-strong:   var(--neutral-900);
  --text-body:     var(--neutral-800);
  --text-muted:    var(--neutral-600);
  --text-subtle:   var(--neutral-500);
  --text-disabled: var(--neutral-400);
  --text-inverse:  var(--color-white);
  --text-on-brand: var(--color-white);
  --text-link:     var(--green-700);
  --text-link-hover: var(--green-800);

  /* ---- Surfaces ---- */
  --surface-page:        var(--neutral-50);
  --surface-card:        var(--color-white);
  --surface-sunken:      var(--neutral-100);
  --surface-raised:      var(--color-white);
  --surface-hover:       var(--neutral-100);
  --surface-active:      var(--neutral-200);
  --surface-brand:       var(--green-600);
  --surface-brand-strong:var(--green-800);
  --surface-brand-subtle:var(--green-50);
  --surface-gold-subtle: var(--gold-50);
  --surface-inverse:     var(--neutral-900);
  --surface-backdrop:    rgba(13, 19, 17, 0.55);

  /* ---- Borders ---- */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--green-600);
  --border-focus:   var(--green-500);
  --border-inverse: var(--neutral-700);

  /* ---- Status: success ---- */
  --success-fg:     var(--green-700);
  --success-bg:     var(--green-50);
  --success-border: var(--green-200);
  --success-solid:  var(--green-600);

  /* ---- Status: warning ---- */
  --warning-fg:     var(--amber-600);
  --warning-bg:     var(--amber-50);
  --warning-border: var(--amber-300);
  --warning-solid:  var(--amber-400);

  /* ---- Status: danger ---- */
  --danger-fg:      var(--red-700);
  --danger-bg:      var(--red-50);
  --danger-border:  var(--red-300);
  --danger-solid:   var(--red-500);
  --danger-solid-hover: var(--red-600);

  /* ---- Status: info ---- */
  --info-fg:        var(--blue-700);
  --info-bg:        var(--blue-50);
  --info-border:    var(--blue-200);
  --info-solid:     var(--blue-600);

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px var(--green-200);
}