:root {
  /* Color aliases */
  --water-color-page: var(--bg);
  --water-color-surface: var(--card);
  --water-color-text: var(--text);
  --water-color-muted: var(--muted);
  --water-color-border: var(--line);
  --water-color-primary: var(--primary);
  --water-color-on-primary: var(--primary-ink);
  --water-color-primary-soft: var(--primary-soft);
  --water-color-danger: var(--danger);
  --water-color-success: var(--success);
  --water-color-success-soft: var(--success-soft);
  --water-color-success-line: var(--success-line);
  --water-color-success-ink: var(--success-ink);
  --water-color-warning: var(--warning);
  --water-color-info: var(--info);

  /* Typography aliases */
  --water-font-size-xs: var(--text-xs);
  --water-font-size-sm: var(--text-sm);
  --water-font-size-md: var(--text-md);
  --water-font-size-base: var(--text-base);
  --water-font-size-lg: var(--text-lg);
  --water-font-size-xl: var(--text-xl);
  --water-font-size-2xl: var(--text-2xl);
  --water-font-weight-normal: var(--weight-normal);
  --water-font-weight-medium: var(--weight-medium);
  --water-font-weight-semibold: var(--weight-semibold);
  --water-font-weight-bold: var(--weight-bold);
  --water-font-weight-heavy: var(--weight-heavy);
  --water-line-height-tight: var(--leading-tight);
  --water-line-height-snug: var(--leading-snug);
  --water-line-height-normal: var(--leading-normal);

  /* Spacing and shape aliases */
  --water-space-1: var(--space-1);
  --water-space-2: var(--space-2);
  --water-space-3: var(--space-3);
  --water-space-4: var(--space-4);
  --water-space-5: var(--space-5);
  --water-space-6: var(--space-6);
  --water-radius-card: var(--radius);
  --water-radius-control: var(--radius-sm);
  --water-elevation-card: var(--shadow);
  --water-elevation-raised:
    0 4px 12px color-mix(in srgb, var(--water-color-text) 8%, transparent),
    0 18px 40px color-mix(in srgb, var(--water-color-text) 8%, transparent);
  --water-icon-frame-backdrop: blur(3px) saturate(145%);
  --water-focus-color: var(--primary);
  --water-focus-width: 2px;
  --water-focus-offset: 2px;
  --water-translate-hover: -2px;
  --water-translate-press: 1px;
  --water-tap-min: var(--tap);
  --water-content-max-inline: 720px;
  --water-shell-gutter: var(--water-space-4);
  --water-dialog-max-inline: 640px;

  /* Layer and motion aliases */
  --water-z-base: var(--z-base);
  --water-z-sticky: var(--z-sticky);
  --water-z-menu: var(--z-menu);
  --water-z-overlay: var(--z-overlay);
  --water-z-toast: var(--z-toast);
  --water-ease-standard: var(--ease-standard);
  --water-duration-fast: var(--duration-fast);
  --water-duration-base: var(--duration-base);
  --water-duration-slow: var(--duration-slow);
  --water-scale-hover: var(--scale-hover);
  --water-duration-hover: var(--duration-hover);
  --water-ease-hover: var(--ease-hover);

  /* Safe-area sides missing from the legacy foundation */
  --water-safe-top: env(safe-area-inset-top, 0px);
  --water-safe-right: env(safe-area-inset-right, 0px);
  --water-safe-bottom: var(--safe-bottom, env(safe-area-inset-bottom, 0px));
  --water-safe-left: env(safe-area-inset-left, 0px);
}

/* Canonical responsive widths: 360px, 420px, 640px, and 768px. */

@media (prefers-reduced-motion: reduce) {
  :where(.water, [data-water], .water *, [data-water] *),
  :where(.water, [data-water], .water *, [data-water] *)::before,
  :where(.water, [data-water], .water *, [data-water] *)::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}