/* ============================================================
   BNC · Semantic color aliases
   Use these in components instead of raw scale values.
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --color-brand-primary: var(--bnc-orange-500);
  --color-brand-primary-hover: var(--bnc-orange-600);
  --color-brand-primary-light: var(--bnc-orange-100);
  --color-brand-primary-subtle: var(--bnc-orange-50);
  --color-brand-secondary: var(--bnc-blue-500);
  --color-brand-secondary-hover: var(--bnc-blue-600);
  --color-brand-secondary-subtle: var(--bnc-blue-50);
  --color-brand-tertiary: var(--bnc-green-500);

  /* ---- Background / surface ---- */
  --color-bg-primary: var(--bnc-white);
  --color-bg-secondary: var(--bnc-gray-50);
  --color-bg-tertiary: var(--bnc-gray-100);
  --color-bg-quaternary: var(--bnc-gray-200);
  --color-bg-inverse: var(--bnc-gray-950);
  --color-bg-brand: var(--bnc-orange-500);
  --color-bg-brand-subtle: var(--bnc-orange-50);
  --color-bg-disabled: var(--bnc-gray-100);
  --surface-card: var(--bnc-white);
  --surface-page: var(--bnc-gray-50);

  /* ---- Text ---- */
  --color-text-primary: var(--bnc-gray-900);
  --color-text-secondary: var(--bnc-gray-700);
  --color-text-tertiary: var(--bnc-gray-600);
  --color-text-quaternary: var(--bnc-gray-500);
  --color-text-placeholder: var(--bnc-gray-400);
  --color-text-disabled: var(--bnc-gray-300);
  --color-text-inverse: var(--bnc-white);
  --color-text-on-brand: var(--bnc-white);
  --color-text-brand: var(--bnc-orange-500);
  --color-text-link: var(--bnc-orange-500);
  --color-text-link-hover: var(--bnc-orange-600);
  --text-body: var(--bnc-gray-700);
  --text-heading: var(--bnc-gray-900);

  /* ---- Border ---- */
  --color-border-primary: var(--bnc-gray-300);
  --color-border-secondary: var(--bnc-gray-200);
  --color-border-tertiary: var(--bnc-gray-100);
  --color-border-brand: var(--bnc-orange-300);
  --color-border-brand-strong: var(--bnc-orange-500);
  --color-border-disabled: var(--bnc-gray-200);

  /* ---- Icon ---- */
  --color-icon-primary: var(--bnc-gray-700);
  --color-icon-secondary: var(--bnc-gray-500);
  --color-icon-tertiary: var(--bnc-gray-400);
  --color-icon-brand: var(--bnc-orange-500);
  --color-icon-on-brand: var(--bnc-white);

  /* ---- Status: foreground / background / border ---- */
  --color-status-success-fg: var(--bnc-success-600);
  --color-status-success-bg: var(--bnc-success-100);
  --color-status-success-border: var(--bnc-success-200);
  --color-status-warning-fg: var(--bnc-warning-600);
  --color-status-warning-bg: var(--bnc-warning-100);
  --color-status-warning-border: var(--bnc-warning-200);
  --color-status-error-fg: var(--bnc-error-600);
  --color-status-error-bg: var(--bnc-error-100);
  --color-status-error-border: var(--bnc-error-300);
  --color-status-info-fg: var(--bnc-blue-500);
  --color-status-info-bg: var(--bnc-blue-50);
  --color-status-info-border: var(--bnc-blue-200);

  /* ---- Focus ring ---- */
  --color-focus-ring: var(--bnc-orange-500);
  --color-focus-ring-offset: var(--bnc-white);
}