/* Material 3 design tokens for the church palette. Light theme only. */
:root {
  /* Colour: every --md-sys-color-on-X must meet WCAG AA on --md-sys-color-X (enforced by ThemeTests). */
  --md-sys-color-primary: #efa63f;
  --md-sys-color-on-primary: #2b1700;
  --md-sys-color-primary-container: #ffddb3;
  --md-sys-color-on-primary-container: #2a1800;
  --md-sys-color-secondary: #141b2e;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #dbe2f9;
  --md-sys-color-on-secondary-container: #141b2e;
  --md-sys-color-tertiary: #1b9ce3;
  --md-sys-color-on-tertiary: #00121f;
  --md-sys-color-tertiary-container: #cde5ff;
  --md-sys-color-on-tertiary-container: #001d31;
  --md-sys-color-crimson: #8c1d2f;
  --md-sys-color-on-crimson: #ffffff;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-background: #fffbf5;
  --md-sys-color-on-background: #1e1b18;
  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #1e1b18;
  --md-sys-color-surface-variant: #f0e0cf;
  --md-sys-color-on-surface-variant: #4f4539;
  --md-sys-color-surface-container: #f6efe7;
  --md-sys-color-surface-container-high: #e9e9e9;
  --md-sys-color-outline: #7f7667;
  --app-color-link: #7a4e00;

  /* Typography */
  --md-ref-typeface: "Poppins", system-ui, sans-serif;
  --md-ref-typeface-heading: "Poppins", system-ui, sans-serif;
  --md-sys-typescale-display-small: 600 clamp(2.125rem, 4vw, 3.125rem)/1.15 var(--md-ref-typeface-heading);
  --md-sys-typescale-headline-medium: 600 clamp(1.75rem, 3vw, 2.25rem)/1.2 var(--md-ref-typeface-heading);
  --md-sys-typescale-title-large: 700 1.25rem/1.3 var(--md-ref-typeface-heading);
  --md-sys-typescale-title-medium: 500 1rem/1.5 var(--md-ref-typeface);
  --md-sys-typescale-body-large: 400 1.0625rem/1.65 var(--md-ref-typeface);
  --md-sys-typescale-body-medium: 400 0.875rem/1.5 var(--md-ref-typeface);
  --md-sys-typescale-label-large: 500 0.875rem/1.4 var(--md-ref-typeface);

  /* Shape */
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-full: 9999px;

  /* Elevation */
  --md-sys-elevation-1: 0 1px 2px rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 15%);
  --md-sys-elevation-2: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);

  /* Dark text on bright photos with no background: a faint light glow keeps the letters crisp. */
  --app-text-glow: 0 0 1px var(--md-sys-color-background), 0 0 2px var(--md-sys-color-background), 0 0 4px color-mix(in srgb, var(--md-sys-color-background) 90%, transparent), 0 0 10px color-mix(in srgb, var(--md-sys-color-background) 60%, transparent);

  /* Layout */
  --app-bar-height: 108px;

  /* State layers */
  --md-sys-state-hover-opacity: 8%;
  --md-sys-state-focus-opacity: 12%;
  --md-sys-state-pressed-opacity: 12%;
}

/* Body text is 17 px on phones and 18 px on larger screens. */
@media (min-width: 721px) {
  :root {
    --md-sys-typescale-body-large: 400 1.125rem/1.65 var(--md-ref-typeface);
    --app-bar-height: 104px;
  }
}