:root {
  --zg-neutral-0: #ffffff;
  --zg-neutral-50: #f8fafc;
  --zg-neutral-100: #f1f5f9;
  --zg-neutral-200: #e2e8f0;
  --zg-neutral-300: #cbd5e1;
  --zg-neutral-400: #94a3b8;
  --zg-neutral-500: #64748b;
  --zg-neutral-600: #475569;
  --zg-neutral-700: #334155;
  --zg-neutral-800: #1e293b;
  --zg-neutral-900: #0f172a;
  --zg-marketing-primary: #e11d48;
  --zg-marketing-secondary: #ffe4e6;
  --zg-surface-page: var(--zg-neutral-50);
  --zg-surface-card: var(--zg-neutral-0);
  --zg-surface-soft: var(--zg-neutral-100);
  --zg-text-primary: var(--zg-neutral-900);
  --zg-text-secondary: var(--zg-neutral-700);
  --zg-text-muted: var(--zg-neutral-500);
  --zg-border-soft: var(--zg-neutral-200);
  --zg-border-default: var(--zg-neutral-300);
  --zg-accent-primary: var(--zg-marketing-primary);
  --zg-accent-secondary: var(--zg-marketing-secondary);
  --zg-accent-hover: #be123c;
  --zg-focus-ring: rgba(225, 29, 72, 0.18);
  --zg-radius-sm: 8px;
  --zg-radius-md: 10px;
  --zg-radius-lg: 14px;
  --zg-shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.06);
  --zg-font-family: "Open Sans", Arial, sans-serif;
}

html.zg-auth-pending body {
  visibility: hidden;
}

:where(button, input, textarea, select, a):focus-visible {
  outline: 3px solid var(--zg-focus-ring);
  outline-offset: 2px;
}