:root {
  --color-background: 249 249 249;
  --color-surface: 249 249 249;
  --color-surface-bright: 249 249 249;
  --color-surface-dim: 218 218 218;
  --color-surface-container-lowest: 255 255 255;
  --color-surface-container-low: 244 243 243;
  --color-surface-container: 238 238 238;
  --color-surface-container-high: 232 232 232;
  --color-surface-container-highest: 226 226 226;
  --color-surface-variant: 226 226 226;

  --color-on-background: 26 28 28;
  --color-on-surface: 26 28 28;
  --color-on-surface-variant: 76 69 70;

  --color-primary: 0 0 0;
  --color-on-primary: 255 255 255;
  --color-primary-container: 27 27 27;
  --color-on-primary-container: 132 132 132;
  --color-primary-fixed: 226 226 226;
  --color-primary-fixed-dim: 198 198 198;
  --color-on-primary-fixed: 27 27 27;
  --color-on-primary-fixed-variant: 71 71 71;

  --color-secondary: 48 42 230;
  --color-on-secondary: 255 255 255;
  --color-secondary-container: 76 76 254;
  --color-on-secondary-container: 232 230 255;
  --color-secondary-fixed: 225 224 255;
  --color-secondary-fixed-dim: 192 193 255;
  --color-on-secondary-fixed: 7 0 108;
  --color-on-secondary-fixed-variant: 35 22 222;

  --color-tertiary: 0 0 0;
  --color-on-tertiary: 255 255 255;
  --color-tertiary-container: 44 0 81;
  --color-on-tertiary-container: 171 89 255;
  --color-tertiary-fixed: 239 219 255;
  --color-tertiary-fixed-dim: 220 184 255;
  --color-on-tertiary-fixed: 44 0 81;
  --color-on-tertiary-fixed-variant: 103 0 181;

  --color-error: 186 26 26;
  --color-on-error: 255 255 255;
  --color-error-container: 255 218 214;
  --color-on-error-container: 147 0 10;

  --color-outline: 126 117 118;
  --color-outline-variant: 207 196 197;
  --color-inverse-primary: 198 198 198;
  --color-inverse-surface: 47 49 49;
  --color-inverse-on-surface: 241 241 241;
  --color-surface-tint: 94 94 94;
}

.dark {
  --color-background: 19 19 19;
  --color-surface: 19 19 19;
  --color-surface-bright: 57 57 57;
  --color-surface-dim: 19 19 19;
  --color-surface-container-lowest: 14 14 14;
  --color-surface-container-low: 28 27 27;
  --color-surface-container: 32 31 31;
  --color-surface-container-high: 42 42 42;
  --color-surface-container-highest: 53 53 52;
  --color-surface-variant: 53 53 52;

  --color-on-background: 229 226 225;
  --color-on-surface: 229 226 225;
  --color-on-surface-variant: 203 195 215;

  --color-primary: 208 188 255;
  --color-on-primary: 60 0 145;
  --color-primary-container: 160 120 255;
  --color-on-primary-container: 52 0 128;
  --color-primary-fixed: 233 221 255;
  --color-primary-fixed-dim: 208 188 255;
  --color-on-primary-fixed: 35 0 92;
  --color-on-primary-fixed-variant: 85 22 190;

  --color-secondary: 200 198 197;
  --color-on-secondary: 48 48 48;
  --color-secondary-container: 71 71 70;
  --color-on-secondary-container: 183 181 180;
  --color-secondary-fixed: 229 226 225;
  --color-secondary-fixed-dim: 200 198 197;
  --color-on-secondary-fixed: 27 27 28;
  --color-on-secondary-fixed-variant: 71 71 70;

  --color-tertiary: 198 198 199;
  --color-on-tertiary: 47 49 49;
  --color-tertiary-container: 144 145 145;
  --color-on-tertiary-container: 40 42 42;
  --color-tertiary-fixed: 226 226 226;
  --color-tertiary-fixed-dim: 198 198 199;
  --color-on-tertiary-fixed: 26 28 28;
  --color-on-tertiary-fixed-variant: 69 71 71;

  --color-error: 255 180 171;
  --color-on-error: 105 0 5;
  --color-error-container: 147 0 10;
  --color-on-error-container: 255 218 214;

  --color-outline: 149 142 160;
  --color-outline-variant: 73 68 84;
  --color-inverse-primary: 109 59 215;
  --color-inverse-surface: 229 226 225;
  --color-inverse-on-surface: 49 48 48;
  --color-surface-tint: 208 188 255;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.material-symbols-outlined.fill {
  font-variation-settings: "FILL" 1;
}

html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: clip;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ---------- Mobile menu overlay ---------- */
#mobile-menu {
  transition: opacity 250ms ease, visibility 250ms ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#mobile-menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#mobile-menu .mobile-menu-panel {
  transform: translateY(-12px);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 220ms ease;
  opacity: 0;
}
#mobile-menu[data-open="true"] .mobile-menu-panel {
  transform: translateY(0);
  opacity: 1;
}
#mobile-menu .mobile-menu-link {
  transform: translateY(8px);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 320ms ease;
}
#mobile-menu[data-open="true"] .mobile-menu-link {
  transform: translateY(0);
  opacity: 1;
}
#mobile-menu[data-open="true"] .mobile-menu-link:nth-child(1) { transition-delay: 60ms; }
#mobile-menu[data-open="true"] .mobile-menu-link:nth-child(2) { transition-delay: 100ms; }
#mobile-menu[data-open="true"] .mobile-menu-link:nth-child(3) { transition-delay: 140ms; }
#mobile-menu[data-open="true"] .mobile-menu-link:nth-child(4) { transition-delay: 180ms; }
#mobile-menu[data-open="true"] .mobile-menu-link:nth-child(5) { transition-delay: 220ms; }

html.menu-open,
html.menu-open body {
  overflow: hidden;
  touch-action: none;
}

/* ---------- Sticky bottom CTA ---------- */
#mobile-cta-bar {
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 200ms ease;
}
#mobile-cta-bar[data-hidden="true"] {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}

/* Sticky CTA hides automatically when the footer scrolls into view
   (see IntersectionObserver in site.js), so no body padding is needed —
   adding it would leave a visible empty strip after the footer. */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #mobile-menu,
  #mobile-menu .mobile-menu-panel,
  #mobile-menu .mobile-menu-link,
  #mobile-cta-bar {
    transition: opacity 120ms ease, visibility 120ms ease !important;
    transform: none !important;
  }
}

/* ---------- Touch device adjustments ---------- */
@media (hover: none) {
  /* Hover-only color reveal stays grayscale on mobile — force full color */
  .grayscale-hover-color {
    filter: none !important;
  }
}