:root {
  /* App chrome (body, drawer, toolbar): not the public page surface — that lives on site-page-shell */
  --app-background-color: var(--md-sys-color-surface-container-low);

  /* Custom */
  --md-outlined-button-container-height: 36px;
  --md-ref-typeface-brand: 'Roboto';

  --app-accent-color-green-light: #34a853;
  --app-accent-color-on-green-light: #ffffff;

  --app-accent-color-green-dark: #79c08c;
  --app-accent-color-on-green-dark: #012e0d;

  --app-accent-color-orange-light: #fbbc04;
  --app-accent-color-on-orange-light: #ffffff;

  --app-accent-color-orange-dark: #ffd46e;
  --app-accent-color-on-orange-dark: #422e00;

  --app-accent-color-teal-light: #00796b;
  --app-accent-color-on-teal-light: #ffffff;

  --app-accent-color-teal-dark: #75bbb3;
  --app-accent-color-on-teal-dark: #422e00;

  --app-accent-color-indigo-light: #303f9f;
  --app-accent-color-on-indigo-light: #ffffff;

  --app-accent-color-indigo-dark: #838ac2;
  --app-accent-color-on-indigo-dark: #101533;

  /* Custom light*/
  --app-accent-color-green: var(--app-accent-color-green-light);
  --app-accent-color-on-green: var(--app-accent-color-on-green-light);

  --app-accent-color-orange: var(--app-accent-color-orange-light);
  --app-accent-color-on-orange: var(--app-accent-color-on-orange-light);

  --app-accent-color-teal: var(--app-accent-color-teal-light);
  --app-accent-color-on-teal: var(--app-accent-color-on-teal-light);

  --app-accent-color-indigo: var(--app-accent-color-indigo-light);
  --app-accent-color-on-indigo: var(--app-accent-color-on-indigo-light);

  --app-link-color: rgba(0, 69, 124, 1);
  --app-header-background-color: rgba(255, 255, 255, 1);
  --app-header-shadow-color: rgba(0, 0, 0, 0.1);
  --app-footer-background-color: rgba(0, 43, 77, 1);
  --app-footer-text-color: rgba(255, 255, 255, 1);
  --app-primary-button-background-color: rgba(178, 69, 21, 1);
  --app-primary-button-text-color: rgba(255, 255, 255, 1);
  --app-primary-accent-color: rgba(221, 85, 25, 1);
  --app-secondary-button-background-color: rgba(0, 69, 124, 1);
  --app-secondary-button-text-color: rgba(255, 255, 255, 1);
  --app-secondary-accent-color: rgba(30, 142, 232, 1);

  --app-hero-background-color: rgba(248, 249, 255, 1);
  --app-hero-header-text-color: rgba(0, 43, 77, 1);
  --app-hero-text-color: rgba(0, 69, 124, 1);

  --app-page-background-color: rgba(226, 236, 244, 1);
  --app-page-header-text-color: rgba(0, 69, 124, 1);
  --app-page-text-color: rgba(0, 69, 124, 1);

  --app-card-background-color: rgba(255, 255, 255, 1);
  --app-card-header-text-color: rgba(0, 43, 77, 1);
  --app-card-text-color: rgba(0, 69, 124, 1);

  --app-hero-card-background-color: rgba(0, 43, 77, 1);
  --app-hero-card-header-text-color: rgba(255, 255, 255, 1);
  --app-hero-card-text-color: rgba(255, 255, 255, 1);
}

/* Custom dark — same hue families as light (blues stay blue, oranges stay orange) */
[data-theme='dark'] {
  --app-background-color: var(--md-sys-color-surface-container-low);

  --app-link-color: rgba(130, 185, 245, 1);
  --app-header-background-color: rgba(24, 30, 40, 1);
  --app-header-shadow-color: rgba(0, 0, 0, 0.4);
  --app-footer-background-color: rgba(0, 32, 56, 1);
  --app-footer-text-color: rgba(255, 255, 255, 0.95);
  --app-primary-button-background-color: rgba(215, 95, 45, 1);
  --app-primary-button-text-color: rgba(255, 255, 255, 1);
  --app-primary-accent-color: rgba(255, 130, 80, 1);
  --app-secondary-button-background-color: rgba(40, 95, 160, 1);
  --app-secondary-button-text-color: rgba(255, 255, 255, 1);
  --app-secondary-accent-color: rgba(100, 175, 245, 1);
  --app-hero-background-color: rgba(20, 28, 40, 1);
  --app-hero-header-text-color: rgba(200, 220, 245, 1);
  --app-hero-text-color: rgba(160, 195, 235, 1);
  --app-page-background-color: rgba(18, 26, 36, 1);
  --app-page-header-text-color: rgba(195, 215, 245, 1);
  --app-page-text-color: rgba(165, 195, 230, 1);
  --app-card-background-color: rgba(28, 38, 52, 1);
  --app-card-header-text-color: rgba(210, 225, 250, 1);
  --app-card-text-color: rgba(170, 200, 235, 1);
  --app-hero-card-background-color: rgba(8, 45, 78, 1);
  --app-hero-card-header-text-color: rgba(255, 255, 255, 1);
  --app-hero-card-text-color: rgba(220, 235, 255, 0.95);

  --app-accent-color-green: var(--app-accent-color-green-dark);
  --app-accent-color-on-green: var(--app-accent-color-on-green-dark);

  --app-accent-color-orange: var(--app-accent-color-orange-dark);
  --app-accent-color-on-orange: var(--app-accent-color-on-orange-dark);

  --app-accent-color-teal: var(--app-accent-color-teal-dark);
  --app-accent-color-on-teal: var(--app-accent-color-on-teal-dark);

  --app-accent-color-indigo: var(--app-accent-color-indigo-dark);
  --app-accent-color-on-indigo: var(--app-accent-color-on-indigo-dark);
}