:root {
  --zm-bg: var(--wp--preset--color--canvas, #07080b);
  --zm-surface: var(--wp--preset--color--surface, #111722);
  --zm-surface-hover: var(--wp--preset--color--surface-hover, #17202e);
  --zm-text: var(--wp--preset--color--text, #f5f7fb);
  --zm-muted: var(--wp--preset--color--muted, #aab4c3);
  --zm-brand: var(--wp--preset--color--brand, #c43a22);
  --zm-brand-hover: var(--wp--preset--color--brand-hover, #b72b1b);
  --zm-focus: var(--wp--preset--color--focus, #ffd34d);
  --zm-success: var(--wp--preset--color--success, #58c78c);
  --zm-danger: var(--wp--preset--color--danger, #f26d6d);
  --zm-border: rgba(255, 255, 255, .12);
  --zm-border-soft: rgba(255, 255, 255, .08);
  --zm-overlay: rgba(7, 8, 11, .78);
  --zm-shadow: 0 16px 40px rgba(0, 0, 0, .32);
  --zm-shadow-soft: 0 10px 28px rgba(0, 0, 0, .22);
  --zm-radius-control: 12px;
  --zm-radius-card: 18px;
  --zm-radius-hero: 24px;
  --zm-content: 760px;
  --zm-wide: 1200px;
  --zm-gutter: clamp(16px, 3vw, 32px);
  --zm-section-space: clamp(56px, 8vw, 96px);
  --zm-header-height: 72px;
  --zm-transition: 180ms ease;
}