/* ETLO — Semantic aliases
   Role-based tokens layered on the primitive scales. Components reference THESE,
   so a theme change only edits this layer. A dark scope is provided. */
:root {
  /* text */
  --text-primary: var(--gray-800);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-400);
  --text-on-primary: #FFFFFF;
  --text-link: var(--blue-400);
  --text-success: var(--green-600);
  --text-danger: var(--red-400);
  --text-warning: var(--orange-600);

  /* surface */
  --surface-page: var(--gray-100);
  --surface-card: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: var(--gray-50);
  --surface-inverse: var(--blue-900);

  /* brand */
  --primary: var(--blue-400);
  --primary-hover: var(--blue-600);
  --primary-press: var(--blue-700);
  --primary-soft: var(--blue-100);
  --on-primary: #FFFFFF;

  /* border / divider */
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --divider: rgba(145,158,171,0.20);
  --field-border: var(--gray-300);
  --field-border-focus: var(--blue-400);

  /* status fills (soft bg / strong fg) */
  --success: var(--green-400);
  --success-soft: var(--green-100);
  --danger: var(--red-400);
  --danger-soft: var(--red-100);
  --warning: var(--warning-500);
  --warning-soft: var(--yellow-100);
  --info: var(--blue-400);
  --info-soft: var(--blue-100);

  /* focus ring */
  --ring: var(--shadow-focus);
}

:root[data-theme="dark"], .dark {
  --text-primary: var(--gray-100);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-600);
  --surface-page: #12191F;
  --surface-card: #1D2731;
  --surface-raised: #25323F;
  --surface-sunken: #161E25;
  --border: rgba(145,158,171,0.20);
  --border-strong: var(--gray-700);
  --primary: #60B8FB;
  --primary-soft: #1C2D47;
  --field-border: var(--gray-700);
}