/* ==========================================================================
   AMEN — Design Tokens
   Material Design 3 (Material You) token system, tuned to the AMEN mascot:
     Halo Gold   #F2B01E / #C98A05   (halo, trim, laces)
     Robe White  #FFFFFF / #FDF8EC   (robe, wings, sneakers)
     Sky         #2F6690             (heaven accent)
     Ink         #16130B             (keyline, sunglasses)
   ========================================================================== */

:root {
  /* ---------- Brand seeds ---------- */
  --amen-gold: #f2b01e;
  --amen-gold-deep: #c98a05;
  --amen-gold-light: #ffd979;
  --amen-ivory: #fdf8ec;
  --amen-sky: #2f6690;
  --amen-ink: #16130b;

  /* ---------- Shape scale (M3) ---------- */
  --md-shape-none: 0;
  --md-shape-xs: 4px;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-xl: 28px;
  --md-shape-2xl: 40px;
  --md-shape-full: 999px;

  /* ---------- Type scale (M3) ---------- */
  --md-font-brand: "Bricolage Grotesque", "Roboto", system-ui, sans-serif;
  --md-font-plain: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", monospace;

  --type-display-lg: 700 clamp(3rem, 8vw, 4.75rem) / 1.06 var(--md-font-brand);
  --type-display-md: 700 clamp(2.5rem, 6vw, 3.75rem) / 1.1 var(--md-font-brand);
  --type-display-sm: 700 clamp(2rem, 4.6vw, 3rem) / 1.14 var(--md-font-brand);
  --type-headline-lg: 700 clamp(1.75rem, 3.4vw, 2.4rem) / 1.2 var(--md-font-brand);
  --type-headline-md: 700 clamp(1.5rem, 2.6vw, 1.9rem) / 1.25 var(--md-font-brand);
  --type-headline-sm: 600 clamp(1.3rem, 2vw, 1.55rem) / 1.3 var(--md-font-brand);
  --type-title-lg: 600 1.375rem/1.5 var(--md-font-plain);
  --type-title-md: 600 1rem/1.5 var(--md-font-plain);
  --type-title-sm: 600 0.875rem/1.43 var(--md-font-plain);
  --type-body-lg: 400 1.0625rem/1.65 var(--md-font-plain);
  --type-body-md: 400 0.9375rem/1.6 var(--md-font-plain);
  --type-body-sm: 400 0.8125rem/1.5 var(--md-font-plain);
  --type-label-lg: 600 0.875rem/1.43 var(--md-font-plain);
  --type-label-md: 600 0.75rem/1.33 var(--md-font-plain);
  --type-label-sm: 600 0.6875rem/1.45 var(--md-font-plain);

  /* ---------- Motion (M3 expressive) ---------- */
  --md-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-ease-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-ease-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-dur-short: 150ms;
  --md-dur-medium: 300ms;
  --md-dur-long: 500ms;
  --md-dur-xlong: 800ms;

  /* ---------- State layer opacities (M3) ---------- */
  --md-state-hover: 0.08;
  --md-state-focus: 0.10;
  --md-state-pressed: 0.10;

  /* ---------- Layout ---------- */
  --page-max: 1200px;
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
  --appbar-h: 68px;
  --section-y: clamp(3.25rem, 7vw, 6rem);
}

/* ==========================================================================
   LIGHT THEME (default)
   Bare :root carries the light palette, so a page with no data-theme
   attribute renders light. The dark block below must stay last: both
   selectors have equal specificity, so source order decides the winner.
   ========================================================================== */
:root,
[data-theme="light"] {
  /* "only light" also opts out of Chrome Android's forced auto-dark */
  color-scheme: only light;

  /* Gold deep enough to carry white text at 4.5:1 — pure halo gold cannot */
  --md-primary: #8a5e00;
  --md-on-primary: #ffffff;
  --md-primary-container: #ffdf9e;
  --md-on-primary-container: #2b1d00;

  --md-secondary: #2f6690;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #cee5f7;
  --md-on-secondary-container: #071e2c;

  --md-tertiary: #a4231c;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #ffdad5;
  --md-on-tertiary-container: #410001;

  --md-error: #ba1a1a;
  --md-on-error: #ffffff;

  --md-surface: #fffcf4;
  --md-on-surface: #1f1b13;
  --md-on-surface-variant: #4e4639;
  --md-surface-dim: #e3ddd0;
  --md-surface-bright: #fffcf4;

  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #fff8e9;
  --md-surface-container: #fcf3e2;
  --md-surface-container-high: #f7edd9;
  --md-surface-container-highest: #f2e7d1;

  --md-outline: #807567;
  --md-outline-variant: #d4c8b3;

  --md-inverse-surface: #353026;
  --md-inverse-on-surface: #f9efdd;
  --md-inverse-primary: #ffc94a;

  --md-scrim: #000000;
  --md-shadow: #000000;

  /* Brand-specific derived tokens */
  --amen-glow-a: rgba(242, 176, 30, 0.26);
  --amen-glow-b: rgba(47, 102, 144, 0.14);
  --amen-hairline: rgba(31, 27, 19, 0.1);
  --amen-glass: rgba(255, 252, 244, 0.8);
  --amen-grid: rgba(31, 27, 19, 0.05);
  --amen-hero-ground: radial-gradient(120% 90% at 72% 4%, #ffeec2 0%, #fff6df 44%, #fffcf4 78%);

  /* Display gradient — halo gold falling into sky */
  --amen-grad-a: #a87400;
  --amen-grad-b: #c9971f;
  --amen-grad-c: #2f6690;

  --md-elev-1: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px 1px rgba(0, 0, 0, 0.07);
  --md-elev-2: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 6px 2px rgba(0, 0, 0, 0.07);
  --md-elev-3: 0 4px 8px 3px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.1);
  --md-elev-4: 0 6px 10px 4px rgba(0, 0, 0, 0.09), 0 2px 3px rgba(0, 0, 0, 0.1);
  --md-elev-5: 0 8px 12px 6px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   DARK THEME (opt-in — must remain the last theme block)
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --md-primary: #ffc94a;
  --md-on-primary: #452e00;
  --md-primary-container: #6b4a00;
  --md-on-primary-container: #ffdf9e;

  --md-secondary: #9ccbf0;
  --md-on-secondary: #06334a;
  --md-secondary-container: #1c4a69;
  --md-on-secondary-container: #cee5f7;

  --md-tertiary: #ffb4a8;
  --md-on-tertiary: #690004;
  --md-tertiary-container: #a4231c;
  --md-on-tertiary-container: #ffdad5;

  --md-error: #ffb4ab;
  --md-on-error: #690005;

  --md-surface: #16130b;
  --md-on-surface: #ebe1cf;
  --md-on-surface-variant: #d0c4ae;
  --md-surface-dim: #100e07;
  --md-surface-bright: #3c372c;

  --md-surface-container-lowest: #0b0904;
  --md-surface-container-low: #1f1b12;
  --md-surface-container: #231f15;
  --md-surface-container-high: #2e2a1f;
  --md-surface-container-highest: #393429;

  --md-outline: #9a8f7e;
  --md-outline-variant: #4e4639;

  --md-inverse-surface: #ebe1cf;
  --md-inverse-on-surface: #353026;
  --md-inverse-primary: #8a5e00;

  --md-scrim: #000000;
  --md-shadow: #000000;

  --amen-glow-a: rgba(255, 201, 74, 0.28);
  --amen-glow-b: rgba(156, 203, 240, 0.18);
  --amen-hairline: rgba(235, 225, 207, 0.1);
  --amen-glass: rgba(35, 31, 21, 0.74);
  --amen-grid: rgba(208, 196, 174, 0.055);
  --amen-hero-ground: radial-gradient(120% 90% at 72% 4%, #4a3505 0%, #241d09 46%, #16130b 78%);

  --amen-grad-a: #ffd97a;
  --amen-grad-b: #ffc94a;
  --amen-grad-c: #9ccbf0;

  --md-elev-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  --md-elev-2: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 6px 2px rgba(0, 0, 0, 0.3);
  --md-elev-3: 0 4px 8px 3px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.5);
  --md-elev-4: 0 6px 10px 4px rgba(0, 0, 0, 0.32), 0 2px 3px rgba(0, 0, 0, 0.5);
  --md-elev-5: 0 8px 12px 6px rgba(0, 0, 0, 0.34), 0 4px 4px rgba(0, 0, 0, 0.5);
}