/* ============================================================
   AFRY — Semantic aliases
   Map raw palette/scale tokens to meaningful roles. Use these in
   components so theming stays consistent.
   ============================================================ */
:root {
  /* Surfaces */
  --surface-page: var(--white);
  --surface-subtle: var(--grey-200);
  --surface-greige: var(--greige);
  --surface-card: var(--white);
  --surface-inverse: var(--moss-500);
  --surface-inverse-deep: var(--moss-800);

  /* Brand */
  --brand: var(--moss-500);
  --brand-deep: var(--moss-800);
  --brand-soft: var(--moss-50);
  --brand-tint: var(--moss-10);
  --support: var(--teal-500);
  --support-soft: var(--teal-50);

  /* Text — black or white only (brand rule). Greys allowed for UI hierarchy. */
  --text-primary: var(--grey-900);
  --text-secondary: var(--grey-700);
  --text-muted: var(--grey-500);
  --text-on-brand: var(--white);
  --text-inverse: var(--white);

  /* Lines */
  --line: var(--grey-300);
  --line-strong: var(--grey-400);
  --line-on-brand: rgba(255, 255, 255, 0.18);

  /* Functional states (use extended palette + accents sparingly) */
  --success: var(--moss-500);
  --success-soft: var(--moss-50);
  --info: var(--teal-600);
  --info-soft: var(--teal-50);
  --warning: var(--yellow);
  --danger: var(--coral-700);
  --danger-soft: var(--coral-100);

  /* Accents */
  --accent-yellow: var(--yellow);
  --accent-coral: var(--coral-400);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(95, 142, 153, 0.45);

  /* Interactive controls */
  --control-radius: var(--radius);
  --control-height: 44px;       /* min hit target */
  --control-height-sm: 36px;
  --control-height-lg: 52px;
}