/* Global theme variables for TransitHub Backoffice
   - Edit values here to change the main look of the app.
   - Use `var(--token-name)` everywhere in CSS or inline styles.
*/

:root {
  /* Brand colors */
  --brand-primary: #0046a5;
  --brand-primary-contrast: #ffffff;
  --brand-dark: #00204c;
  --brand-accent: #00a0ff;
  --brand-background-light: #ebeced;

  /* Surface/backgrounds */
  --surface-bg: #ffffff;
  --surface-muted: #f5f5f5;
  --surface-contrast: #f8f9fa;

  /* Text */
  --text-default: #212529;
  --text-muted: #6c757d;
  --text-inverse: #ffffff;

  /* Borders & shadows */
  --border-color: rgba(0,0,0,0.08);
  --card-shadow: 0 0.12rem 0.2rem rgba(0, 0, 0, 0.075);

  /* Sizes */
  --radius-base: 0.5rem;
  --control-height: 2.25rem;
  --button-padding-x: 1rem;

  /* Spacing tokens */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;

  /* Misc */
  --success: #198754;
  --danger: #dc3545;
}

/* Example helper classes using the variables */
.btn-brand {
  background-color: var(--brand-primary);
  color: var(--brand-primary-contrast);
  border-radius: var(--radius-base);
  padding: 0.375rem var(--button-padding-x);
}

.card-surface {
  background: var(--surface-bg);
  box-shadow: var(--card-shadow);
  border-color: var(--border-color);
  border-radius: var(--radius-base);
}