:root {
  /* Vidalys Flow — canonical visual tokens. See docs/design/VISUAL_SYSTEM.md. */
  --vf-color-canvas: #f5f7fb;
  --vf-color-surface: #ffffff;
  --vf-color-surface-soft: #f8fafd;
  --vf-color-surface-raised: #ffffff;
  --vf-color-ink: #19283f;
  --vf-color-muted: #596b83;
  --vf-color-border: #e2e8f1;
  --vf-color-border-strong: #c7d2e2;

  /* Brand structure */
  --vf-color-sidebar: #101e34;
  --vf-color-sidebar-soft: #192e4c;

  /* Primary action */
  --vf-color-primary: #3157d5;
  --vf-color-primary-hover: #2548b8;
  --vf-color-primary-strong: #1e3d9a;
  --vf-color-primary-soft: #eff3ff;
  --vf-color-primary-border: #d9e3ff;

  /* Product accents with explicit roles */
  --vf-color-teal: #0f8c8c;
  --vf-color-teal-hover: #0b7373;
  --vf-color-teal-soft: #eaf8f7;
  --vf-color-teal-border: #cdebea;

  --vf-color-intelligence: #7058c5;
  --vf-color-intelligence-hover: #5946c7;
  --vf-color-intelligence-soft: #f1efff;
  --vf-color-intelligence-border: #ded8ff;

  /* Channel identity */
  --vf-color-channel-whatsapp: #168a5b;
  --vf-color-channel-whatsapp-soft: #eaf8f1;
  --vf-color-channel-site: var(--vf-color-teal);
  --vf-color-channel-site-soft: var(--vf-color-teal-soft);

  /* Semantic state */
  --vf-color-success: #16805a;
  --vf-color-success-soft: #eaf8f2;
  --vf-color-warning: #b7791f;
  --vf-color-warning-soft: #fff6e5;
  --vf-color-danger: #c2414b;
  --vf-color-danger-soft: #fff0f2;
  --vf-color-info: #2d6aa3;
  --vf-color-info-soft: #edf5fb;

  /* Interaction */
  --vf-focus-ring: 0 0 0 4px rgba(49, 87, 213, .14);
  --vf-selected-ring: inset 3px 0 0 var(--vf-color-primary);

  /* Shape and depth */
  --vf-radius-sm: 10px;
  --vf-radius-md: 14px;
  --vf-radius-lg: 16px;
  --vf-shadow-sm: 0 2px 8px rgba(16, 30, 52, .035);
  --vf-shadow-md: 0 12px 32px rgba(16, 30, 52, .07);
  --vf-shadow-focus: 0 0 0 4px rgba(49, 87, 213, .14);

  --vf-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vf-space-1: 4px;
  --vf-space-2: 8px;
  --vf-space-3: 12px;
  --vf-space-4: 16px;
  --vf-space-6: 24px;
  --vf-space-8: 32px;

  /* Layout */
  --vf-sidebar-expanded-width: 252px;
  --vf-topbar-height: 72px;
  --vf-font-body: 14px;
  --vf-font-meta: 12px;
  --vf-line-height: 1.55;
  --vf-page-gutter: clamp(16px, 2.5vw, 32px);
}