:root {
  --etac-color-primary: var(--wp--preset--color--primary, #1f6fd8);
  --etac-color-text-strong: #0b1220;
  --etac-color-text-main: color-mix(in srgb, var(--etac-color-text-strong) 84%, transparent);
  --etac-color-text-subtle: color-mix(in srgb, var(--etac-color-text-strong) 62%, transparent);
  --etac-color-surface-canvas: #ffffff;
  --etac-color-surface-subtle: #f5f5f7;
  --etac-color-surface-elevated: rgba(255, 255, 255, 0.94);
  --etac-color-surface-glass: rgba(255, 255, 255, 0.76);
  --etac-color-line-soft: rgba(11, 18, 32, 0.05);
  --etac-color-line-default: rgba(11, 18, 32, 0.08);

  --etac-space-2xs: 4px;
  --etac-space-xs: 8px;
  --etac-space-sm: 12px;
  --etac-space-md: 16px;
  --etac-space-lg: 20px;
  --etac-space-xl: 24px;
  --etac-space-2xl: 28px;
  --etac-space-3xl: 32px;
  --etac-space-4xl: 40px;
  --etac-space-5xl: 48px;
  --etac-space-6xl: 64px;

  --etac-radius-sm: 12px;
  --etac-radius-md: 20px;
  --etac-radius-lg: 24px;
  --etac-radius-xl: 28px;
  --etac-radius-pill: 999px;

  --etac-shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.08);
  --etac-shadow-card: 0 18px 36px rgba(15, 23, 42, 0.06);
  --etac-shadow-hero: 0 22px 50px rgba(15, 23, 42, 0.08);
  --etac-shadow-button: 0 16px 34px rgba(11, 18, 32, 0.14);

  --etac-type-eyebrow-size: 0.98rem;
  --etac-type-eyebrow-tracking: 0.12em;
  --etac-type-display-mobile: clamp(2.2rem, 9vw, 3.6rem);
  --etac-type-display-large-mobile: clamp(2.65rem, 10vw, 4rem);
  --etac-type-body-mobile: 1.0625rem;
  --etac-type-body-mobile-leading: 1.88;
  --etac-type-title-tight-leading: 1.02;

  --etac-breakpoint-mobile: 767px;
  --etac-breakpoint-tablet: 980px;
}