:root {
  /* Canonical color system */
  --palette-soft: #c9daea;
  --palette-muted: #717880;
  --palette-dark: #191516;
  --palette-deep: #77424f;
  --palette-accent: #d56e88;
  --color-primary: var(--palette-dark);
  --color-secondary: var(--palette-deep);
  --color-accent: var(--palette-accent);
  --color-accent-hover: color-mix(in srgb, var(--palette-accent) 82%, var(--palette-dark));
  --color-accent-soft: color-mix(in srgb, var(--palette-accent) 14%, #ffffff);
  /* Page canvas: white; use --palette-soft in components/sections where a cool strip is intentional */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text: var(--palette-dark);
  --color-text-muted: var(--palette-muted);
  --color-border: color-mix(in srgb, var(--palette-muted) 40%, #ffffff);

  /* Semantic accents */
  --color-accent-subtle: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  --color-accent-ring: color-mix(in srgb, var(--color-accent) 28%, transparent);
  --color-primary-soft: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));

  /* Shared component primitives */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-card: 0 14px 32px color-mix(in srgb, var(--palette-dark) 12%, transparent);
  --shadow-soft: 0 10px 26px color-mix(in srgb, var(--palette-dark) 10%, transparent);
  --shadow-focus: 0 0 0 3px var(--color-accent-ring);

  --button-primary-bg: var(--color-accent);
  --button-primary-bg-hover: var(--color-accent-hover);
  --button-primary-fg: #ffffff;
  --button-secondary-bg: var(--color-accent-soft);
  --button-secondary-fg: var(--color-accent-hover);
  --button-secondary-border: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));

  --input-bg: color-mix(in srgb, var(--palette-muted) 10%, #ffffff);
  --input-border: var(--color-border);
  --input-border-focus: color-mix(in srgb, var(--color-accent) 50%, var(--color-border));
  --input-ring-focus: var(--color-accent-ring);

  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-shadow: var(--shadow-card);
}

:root {
  /* Legacy aliases for safe migration */
  --haveitall-primary: var(--color-primary);
  --haveitall-dark-1: var(--color-primary);
  --haveitall-dark-2: color-mix(in srgb, var(--color-primary) 70%, #ffffff);
  --haveitall-soft: var(--color-bg);
  --haveitall-panel-soft: color-mix(in srgb, var(--palette-muted) 6%, var(--color-surface));
  --haveitall-text: var(--color-text);
  --haveitall-muted: var(--color-text-muted);
  --haveitall-surface: var(--color-surface);
  --haveitall-surface-muted: color-mix(in srgb, var(--palette-muted) 5%, var(--color-surface));
  --haveitall-text-strong: var(--color-text);
  --haveitall-border-ui: var(--color-border);
  --haveitall-border-subtle: color-mix(in srgb, var(--color-border) 78%, var(--color-surface));
  --haveitall-accent-soft: var(--color-accent-soft);
  --haveitall-accent-soft-strong: color-mix(in srgb, var(--color-accent) 35%, var(--color-surface));
  --haveitall-accent-on-soft: var(--color-accent-hover);
  --haveitall-primary-link: var(--color-primary);
  --haveitall-primary-hover: color-mix(in srgb, var(--color-primary) 84%, black);
  --haveitall-control-border: var(--input-border);
  --haveitall-control-bg: var(--input-bg);
  --haveitall-control-focus: var(--input-ring-focus);
  --haveitall-border-shell: var(--color-border);
  --haveitall-focus-ring: var(--color-accent-ring);
  --haveitall-dropdown-option-selected-bg: var(--color-accent);
  --haveitall-dropdown-option-checked-bg: color-mix(in srgb, var(--color-accent) 20%, var(--color-surface));

  /* Marketing widget compatibility aliases */
  --haveitall-color-primary: var(--color-primary);
  --haveitall-color-secondary: var(--color-accent);
  --haveitall-color-accent: var(--color-accent);
  --haveitall-color-accent-hover: var(--color-accent-hover);
  --haveitall-color-accent-soft: var(--color-accent-soft);
  --haveitall-color-surface: var(--color-surface);
  --haveitall-color-border: var(--color-border);
  --haveitall-color-text: var(--color-text);
  --haveitall-color-text-muted: var(--color-text-muted);
}