/* Compatibility vocabulary for shared editorial components.
 * All palette values derive from theme.json; no site overlay is required.
 * Existing overlays may still override tokens, never structural rules.
 */
:root {
  --wi2-ink: var(--color-dark-bg);
  --wi2-ink-2: var(--color-dark-bg-alt);
  --wi2-cyan: var(--color-accent);
  --wi2-coral: var(--color-accent-2);
  --wi2-lime: var(--color-accent-3);
  --wi2-dark-section: color-mix(in srgb, var(--wi2-ink) 88%, var(--wi2-cyan));
  --wi2-dark-section-2: color-mix(in srgb, var(--wi2-ink) 78%, var(--wi2-lime));
  --wi2-accent-rgb: var(--color-accent-rgb);
  --wi2-accent-2-rgb: var(--color-accent-2-rgb);
  --wi2-dark-rgb: var(--color-dark-rgb);
  --wi2-card: #fff;
  --wi2-canvas: var(--color-canvas, #fafafa);
  --wi2-paper: var(--color-bg);
  --wi2-paper-2: var(--color-bg-alt);
  --wi2-text: var(--color-text);
  --wi2-muted: var(--color-text-muted);
  --wi2-line: var(--color-border);
  --wi2-accent-strong: var(--color-accent);
  --wi2-on-accent: var(--color-dark-bg);
  --wi2-on-accent-2: var(--color-dark-bg);
  --wi2-shadow: var(--shadow-lg);
  --wi2-card-radius: var(--radius-lg);
  --cms-ds-action-radius: var(--style-button-radius, 12px);
  --cms-ds-action-motion: .3s cubic-bezier(.22, .61, .36, 1);
  --wi2-action-radius: var(--cms-ds-action-radius);
  --wi2-action-motion: var(--cms-ds-action-motion);
  --wi2-card-shadow: var(--shadow);
  --wi2-card-shadow-hover: var(--shadow-hover);
  --wi2-card-motion: .32s cubic-bezier(.22, 1, .36, 1);
  --wi2-title-motion: .24s ease;
  --wi2-post-excerpt-size: 14.5px;
  --wi2-post-excerpt-line: 1.52;
  --wi2-type-display: clamp(40px, 4.8vw, 68px);
  --wi2-type-display-wide: clamp(42px, 5.1vw, 74px);
  --wi2-type-display-xl: clamp(44px, 5.5vw, 76px);
  --wi2-type-section: clamp(30px, 3.8vw, 54px);
  --wi2-type-feature: clamp(28px, 3.2vw, 46px);
  --wi2-type-comparison-hero: clamp(38px, 4.2vw, 56px);
  --wi2-type-comparison-section: clamp(28px, 3.1vw, 43px);
  --wi2-type-comparison-card: clamp(22px, 2.4vw, 28px);
  --wi2-type-display-mobile: clamp(34px, 9.5vw, 48px);
  --wi2-type-comparison-hero-mobile: clamp(32px, 9.2vw, 43px);
  --wi2-hero-height: clamp(570px, 72vh, 700px);
  --cms-layout-section-bg: transparent;
}