/* 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.
   Oct 21 (Jaycee): warmer sage from Holly-400 instead of the cool Holly-50/100 mint, which read blue. */
:root.ivory-variation[data-colorway="sage"][data-theme="light"] {
  /* Oct 22 (Jaycee): the canvas is #fcfdfd, a tad whiter than her #fafbfb. */
  --theme-surface: var(--palette-greyscale-75);
  --theme-surface-raised: var(--palette-greyscale-50);
  --theme-surface-raised-strong: color-mix(in srgb, var(--palette-holly-400) 16%, var(--palette-greyscale-50));
  --theme-surface-warm: var(--theme-surface-raised-strong);
  /* Oct 22 (Jaycee): borders are a grey sage everywhere, "a bit more gray", then "thinner and whiter", then "lighter": 10% Holly-400 on an 8% ink grey. */
  --theme-line: color-mix(in srgb, var(--palette-holly-400) 10%, color-mix(in srgb, var(--theme-ink) 8%, var(--palette-greyscale-50)));
}
[data-colorway="sage"][data-theme="light"] .ivory-grid { color: var(--theme-grid); }
[data-colorway="sage"][data-theme="light"] .qpick {
  --chip-face: var(--theme-surface-raised);
  --chip-hover: var(--theme-sage-faint);
  --chip-edge: var(--theme-sage-edge);
  --chip-outline: var(--theme-sage-line);
}
[data-colorway="sage"] .cd { box-shadow: 0 6px 18px var(--theme-shadow); }