: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: #ffffff;
  --brand-school-name-color: red;

  --brand-nav-link: #1b5e20;
  --brand-nav-link-active: #ffffff;
  --brand-nav-hover-bg: #ffffff;
  --brand-nav-hover-text: #2e7d32;

  --brand-logout-bg: #1b5e20;
  --brand-logout-text: #ffffff;

  --brand-button-bg: #1b5e20;
  --brand-button-text: #ffffff;
  --brand-button-hover-bg: #145218;
  --brand-button-hover-text: #ffffff;

  --brand-danger-bg: #1b5e20;
  --brand-danger-hover-bg: #145218;
  --brand-danger-text: #ffffff;

  --brand-success-bg: #2e7d32;
  --brand-success-hover-bg: #1b5e20;
  --brand-success-text: #ffffff;

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

  --brand-kiosk-gradient-from: #1b5e20;
  --brand-kiosk-gradient-to: #2e7d32;

  /*
   * 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: #1b5e20;
  --bs-primary-rgb: 27, 94, 32;

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

  --bs-link-color: #1b5e20;
  --bs-link-hover-color: #145218;
}