:root {
  /* Blur strength */
  --glass-blur: 10px;

  /* Surface/background tokens (HSL + alpha for predictable tinting) */
  --accent: var(--wp--preset--color--teal, #2a9d8f);
  --text: #111827;
  --muted: #6b7280;
  --surface: #f6f8f9;

  /* Glass layers */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-surface: rgba(255, 255, 255, 0.12);
  --glass-grad: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  --glass-stroke: rgba(255, 255, 255, 0.35);
  --glass-border: var(--glass-stroke);

  /* Radii */
  --radius-12: 12px;
  --radius: 16px;

  /* Elevation and shadows */
  --shadow-soft: 0 6px 16px rgba(0, 0, 0, 0.10);
  --elev-1: 0 4px 12px rgba(0,0,0,.10);
  --elev-2: 0 8px 20px rgba(0,0,0,.12);
  --elev-3: 0 12px 32px rgba(0,0,0,.16);
  --glass-shadow: var(--elev-2);
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-blur: 0px;
    --glass-bg: rgba(255, 255, 255, 0.14);
  }
}
/* Strength presets */
.glass-blur-low {
  --glass-blur: 6px;
}
.glass-blur-high {
  --glass-blur: 12px;
}

/* Reduced motion preference: clamp transitions */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
  }
}
@media (prefers-reduced-motion: no-preference) {
  :root { --motion-fast: 120ms; }
}