/* Colour variations affect light-mode surfaces only.
   All retain the original brand accents, artwork and dark theme. */
:root.ivory-variation[data-colorway="warm"][data-theme="light"] {
  --theme-surface: var(--palette-spanish-100);
}

:root.ivory-variation[data-colorway="jade"][data-theme="light"] {
  --theme-surface: color-mix(in srgb, var(--palette-holly-50) 25%, var(--palette-greyscale-50));
  --theme-surface-raised: var(--palette-greyscale-50);
  --theme-surface-raised-strong: var(--palette-holly-100);
  --theme-surface-warm: var(--palette-holly-100);
}

[data-colorway="jade"][data-theme="light"] .ivory-grid {
  color: color-mix(in srgb, var(--palette-holly-600) 12%, transparent);
}
[data-colorway="jade"][data-theme="light"] .qpick {
  --chip-hover: var(--palette-holly-50);
  --chip-edge: var(--palette-holly-300);
  --chip-outline: var(--palette-holly-200);
}
[data-colorway="jade"][data-theme="light"] .fw-post {
  border-color: var(--palette-holly-100);
}

/* Warm alternatives retain the cream cards and yellow supporting surfaces. */
:root.ivory-variation[data-colorway="yellow"][data-theme="light"] {
  --sunny-base: color-mix(in srgb, var(--palette-golden-50) 90%, var(--palette-golden-100));
  --theme-surface: color-mix(in srgb, var(--sunny-base) 99%, var(--palette-greyscale-50));
  --theme-surface-raised: color-mix(in srgb, var(--sunny-base) 60%, var(--palette-greyscale-50));
  --theme-surface-raised-strong: color-mix(in srgb, var(--sunny-base) 80%, var(--palette-golden-300));
  --theme-surface-warm: var(--theme-surface-raised-strong);
}

:root.ivory-variation[data-colorway="sage-gray"][data-theme="light"] {
  --theme-surface: color-mix(in srgb, color-mix(in srgb, var(--palette-holly-50) 25%, var(--palette-greyscale-50)) 80%, var(--palette-greyscale-100));
}

/* This option pairs the cooler canvas with the original warm elements. */
[data-colorway="sage-gray"][data-theme="light"] .fw-subscribe {
  --cta-bg: var(--theme-accent);
  --cta-hover: var(--theme-accent-hover);
  --cta-shadow: var(--theme-accent-edge);
  --cta-ink: var(--theme-accent-contrast);
}

[data-colorway="yellow"][data-theme="light"] .ivory-mock-frame { background: color-mix(in srgb, var(--theme-surface-raised-strong) 65%, var(--sunny-base)); }

/* Shipping palette: sage surfaces with yellow reserved for brand actions. */
:root.ivory-variation[data-colorway="sage"][data-theme="light"] {
  --theme-surface: color-mix(in srgb, color-mix(in srgb, var(--palette-holly-50) 25%, var(--palette-greyscale-50)) 80%, var(--palette-greyscale-100));
  --theme-surface-raised: var(--palette-greyscale-50);
  --theme-surface-raised-strong: var(--palette-holly-100);
  --theme-surface-warm: var(--theme-surface-raised-strong);
}
[data-colorway="sage"][data-theme="light"] .ivory-grid { color: color-mix(in srgb, var(--palette-holly-600) 12%, transparent); }
[data-colorway="sage"][data-theme="light"] .qpick {
  --chip-face: var(--theme-surface-raised);
  --chip-hover: var(--palette-holly-50);
  --chip-edge: var(--palette-holly-300);
  --chip-outline: var(--palette-holly-200);
}
[data-colorway="sage"] .blog-card { border: 1px solid var(--theme-line); }
[data-colorway="sage"] .cd { box-shadow: 0 6px 18px color-mix(in srgb, var(--palette-greyscale-950) 8%, transparent); }