:root {
  /* Surfaces & Material */
  --chatterton-surface-card: rgba(255,255,255,0.88);
  --chatterton-surface-1: #fff;
  --chatterton-surface-variant: #f6f7f8;
  --chatterton-outline: rgba(17,24,39,.16);
  --chatterton-elev-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --chatterton-hero-surface: rgba(255,255,255,.90);
  --chatterton-hero-shadow: 0 4px 12px -2px rgba(0,0,0,.18), 0 2px 6px -1px rgba(0,0,0,.10);
  --chatterton-hero-radius: 12px;
  --chatterton-card-bg: #fff;
  --chatterton-card-radius: 18px;
  --chatterton-card-shadow: none;
  --chatterton-card-shadow-hover: 0 6px 24px rgba(0,0,0,.16);
  --chatterton-card-img-radius: 14px;
  --chatterton-card-img-shadow: 0 2px 8px rgba(0,0,0,.10);
  --chatterton-card-cta-shadow: 0 1px 4px rgba(0,0,0,.08);
  --chatterton-card-transition: box-shadow .18s, transform .18s;

  /* Chip */
  --chatterton-chip-bg: rgba(17,24,39,.06);
  --chatterton-chip-border: rgba(17,24,39,.20);
  --chatterton-chip-color: var(--wp--preset--color--contrast);
  --chatterton-chip-radius: 999px;

  /* App Bar Material */
  --md-appbar-height: 72px;
  --md-appbar-height-mobile: 64px;
  --md-appbar-bg: #fff;
  --md-appbar-color: var(--wp--preset--color--contrast);
  --md-appbar-border: 1px solid rgba(0,0,0,.06);
  --md-appbar-elev: 0 1px 2px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.10);
  --md-appbar-elev-scrolled: 0 4px 8px -2px rgba(0,0,0,.18), 0 2px 4px -1px rgba(0,0,0,.12);
  --md-focus-ring: 2px solid var(--wp--preset--color--primary);
  --md-nav-gap: clamp(12px, 2.2vw, 28px);
  --md-hover-bg: rgba(0,0,0,.06);
  --md-active-indicator-h: 2px;
  /* Bridge var for header height usage in hero layouts */
  --chatterton-header-h: var(--md-appbar-height);
}