:root {
  /*
   * Primary brand tokens (edit these per school)
   */
  --brand-primary: #ffd700;
  --brand-accent: #4caf50;
  --brand-text-dark: #333;
  --brand-text-light: #fff;

  /*
   * App-wide branding tokens (staff + kiosk)
   */
  --brand-page-bg: #f5f7fa;
  --brand-school-name-color: red;

  --brand-nav-link: #22333b;
  --brand-nav-link-active: #012c85;
  --brand-nav-hover-bg: #ffffff;
  --brand-nav-hover-text: #ffb845;

  --brand-logout-bg: #22333b;
  --brand-logout-text: #ffffff;

  --brand-button-bg: #22333b;
  --brand-button-text: #ffffff;
  --brand-button-hover-bg: #ffb845;
  --brand-button-hover-text: #ffb845;

  --brand-danger-bg: #932c27;
  --brand-danger-hover-bg: #722323;
  --brand-danger-text: #ffffff;

  --brand-success-bg: #5e936c;
  --brand-success-hover-bg: #3e5f44;
  --brand-success-text: #ffffff;

  --brand-footer-bg: #1c2b2d;

  --brand-kiosk-gradient-from: #f8f9fa;
  --brand-kiosk-gradient-to: #e9ecef;

  /*
   * Backwards-compatible vars used by your existing landing `style.css`
   */
  --primary-yellow: var(--brand-primary);
  --secondary-green: var(--brand-accent);
  --text-dark: var(--brand-text-dark);
  --text-light: var(--brand-text-light);
}

/*
 * Bootstrap theme variables (affects `.btn-primary`, etc.)
 * Put this AFTER bootstrap.min.css in your layouts.
 */
:root {
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 255, 215, 0;

  --bs-success: var(--brand-accent);
  --bs-success-rgb: 76, 175, 80;

  --bs-link-color: var(--brand-accent);
  --bs-link-hover-color: var(--brand-accent);
}