/**
 * brand-tokens.css — single source of truth for brand hex tokens.
 * Semantic HSL variables in app-layout.css are kept in sync with these values.
 * Load after Bootstrap + page-ux, before app-layout.css.
 */
:root {
  /* Primary (gold) scale */
  --color-primary-50: #f7f2e8;
  --color-primary-100: #efe5d1;
  --color-primary-200: #e0cfa3;
  --color-primary-300: #d1b975;
  --color-primary-400: #c2a165;
  --color-primary-500: #a88952;

  /* Neutral (charcoal) scale */
  --color-dark-100: #d6d6d6;
  --color-dark-300: #a6a6a6;
  --color-dark-500: #737373;
  --color-dark-700: #424141;
  --color-dark-900: #1a1a1a;

  /* Semantic */
  --color-success: #4caf50;
  --color-warning: #f4a261;
  --color-error: #e63946;
  --color-info: #3a86ff;

  /* Theme surfaces (explicit; used where hex is required) */
  --color-surface-app-light: #ffffff;
  --color-surface-app-dark: #1a1a1a;
  --color-text-primary-light: #1a1a1a;
  --color-text-primary-dark: #f2f2f2;
  --color-surface-card-dark: #2e2e2e;

  /* Typography aliases (use in CSS; no raw hex in components) */
  --color-text-primary: var(--color-text-primary-light);
  --color-text-secondary: var(--color-dark-500);
  --color-text-muted: var(--color-dark-300);
}

:root[data-theme="dark"] {
  --color-text-primary: var(--color-text-primary-dark);
  --color-text-secondary: var(--color-dark-300);
  --color-text-muted: var(--color-dark-500);
}