/**
 * TravelExpense — global design tokens (canonical palette).
 * Load before any app CSS that references these variables.
 * Do not hardcode these hex values in templates; use var(--token-name).
 */

:root {
  --color-primary-dark: #545f66;
  --color-secondary: #829399;
  --color-accent-soft: #d0f4ea;
  --color-accent-light: #e8fcc2;
  --color-accent-strong: #b1cc74;
  --color-accent-strong-hover: #9db863;

  /* Semantic mapping */
  --color-bg-main: #f8f9fa;
  --color-bg-card: #ffffff;

  --color-text-primary: #1e1e1e;
  --color-text-secondary: #545f66;

  --color-border: #e0e0e0;

  --color-success: var(--color-accent-strong);
  --color-info: var(--color-accent-soft);

  /* Surfaces */
  --color-topbar-bg: var(--color-bg-card);
  --color-text-on-dark: #ffffff;
  --color-sidebar-link: rgba(255, 255, 255, 0.75);

  /* Data visualization (Chart.js / ApexCharts — mirror in static/js/te_chart_colors.js) */
  --color-chart-primary: #b1cc74;
  --color-chart-secondary: #829399;
  --color-chart-soft: #d0f4ea;
}