:root {
  /* Canonical ViaLem brand colors (aligned with Elementor globals). */
  --vl-brand-primary: #24747C;
  --vl-brand-primary-dark: #0E5156;
  --vl-brand-primary-light: #6AB7B7;
  --vl-brand-secondary: #EFAF38;
  --vl-brand-accent: var(--vl-brand-primary-light);
  --vl-brand-ink: #27313A;
  --vl-brand-sand: #F8F3EC;
  --vl-brand-mist: #E3EFED;
  --vl-brand-ice: #DDEFF3;
  --vl-brand-slate: #6B7480;
  --vl-brand-smoke: #D0D0D0;
  --vl-brand-success: #42B883;
  --vl-brand-error: #D9534F;

  /* Semantic palette. */
  --vl-bg-page: var(--vl-brand-sand);
  --vl-bg-surface: #FFFFFF;
  --vl-bg-subtle: var(--vl-brand-mist);
  --vl-text-primary: var(--vl-brand-ink);
  --vl-text-muted: var(--vl-brand-slate);
  --vl-text-secondary: var(--vl-text-muted);
  --vl-on-primary: #FFFFFF;
  --vl-border-subtle: var(--vl-brand-smoke);
  --vl-border-strong: var(--vl-brand-primary-dark);
  --vl-success: var(--vl-brand-success);
  --vl-warning: var(--vl-brand-secondary);
  --vl-error: var(--vl-brand-error);
  --vl-danger: var(--vl-error);

  /* Shared derived tones and aliases used across older CSS. */
  --vl-link: var(--vl-brand-primary);
  --vl-link-hover: #1D5F63;
  --vl-link-active: var(--vl-brand-primary-dark);
  --vl-info-surface: #F2F8F8;
  --vl-info-strong: var(--vl-brand-primary-dark);
  --vl-surface-warning: #FDE8C8;
  --vl-border-color: rgba(14, 81, 86, 0.18);
  --vl-border: 1px solid var(--vl-border-color);
  --vl-text: var(--vl-text-primary);
  --vl-muted: var(--vl-text-muted);
  --vl-primary: var(--vl-brand-primary);
  --vl-primary-dark: var(--vl-brand-primary-dark);

  --vl-radius-sm: 6px;
  --vl-radius-md: 12px;
  --vl-radius: var(--vl-radius-md);
  --vl-radius-pill: 999px;
  --vl-shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.05);
  --vl-shadow: 0 10px 26px rgba(14, 81, 86, 0.08);
  --vl-shadow-card: var(--vl-shadow-soft);
}