/* 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) 8%, transparent); }
[data-colorway="sage"][data-theme="light"] .qpick {
  --chip-face: var(--palette-holly-50);
  --chip-hover: var(--palette-holly-100);
  --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); }

/* Keep the conversation itself, without a second light-mode enclosure. */
:root.ivory-variation[data-colorway="sage"][data-theme="light"] .ivory-mock-frame { background: transparent; padding: 0; }
[data-colorway="sage"] .site-home { --section-space: clamp(64px, 7vw, 96px); }
[data-colorway="sage"] .site-home > .vsection:not(.vhero) { padding-top: var(--section-space); }
[data-colorway="sage"] .site-home > .fw-extension { margin-top: 0; }
[data-colorway="sage"] .site-home > .fw-extension > .fw-section { padding-top: var(--section-space); padding-bottom: 0; }
[data-colorway="sage"] .fw-journal .fw-section-head h2 { margin-bottom: 8px; }
[data-colorway="sage"] .fw-journal .fw-section-head p { margin-bottom: 4px; }
[data-colorway="sage"] .fw-journal .fw-section-head { margin-bottom: 24px; }
[data-colorway="sage"] .blog-archive .blog-heading h1 { margin: 0 0 12px; }
[data-colorway="sage"] .blog-archive .blog-lede { margin: 0 0 8px; }
[data-colorway="sage"] .blog-archive .blog-back { margin-bottom: 0; }

/* Sep 24 trial: orange highlighted cards, yellow footer, thin yellow blog borders (light mode). */
[data-colorway="sage"][data-theme="light"] .feeders-pile .feeder.lit {
  border-color: var(--palette-golden-500);
  box-shadow: 0 0 0 1px var(--palette-golden-500), 0 10px 28px color-mix(in srgb, var(--palette-golden-500) 22%, transparent);
}
:root.ivory-variation[data-colorway="sage"][data-theme="light"] footer.ft {
  --muted: var(--palette-greyscale-900);
  background: var(--palette-golden-300);
  border-color: var(--palette-golden-400);
}
:root.ivory-variation[data-colorway="sage"][data-theme="light"] footer.ft .f-links a { color: var(--palette-greyscale-950); }
[data-colorway="sage"][data-theme="light"] .fw-post { border: 1px solid var(--palette-golden-300); }
[data-colorway="sage"][data-theme="light"] .blog-card { border-color: var(--palette-golden-300); }
/* Blog shares the Home/About content edge so the page doesn't slide sideways between links. */
[data-colorway="sage"] .blog-main { width: auto; margin-inline: auto; }
[data-colorway="sage"] .blog-archive { margin-top: 0; padding-top: 56px; }
@media (min-width: 768px) { [data-colorway="sage"] .blog-archive { padding-top: 88px; } }
/* Sage diagram canvas leans gray, with only a hint of sage (Jaycee, Sep 24). */
[data-colorway="sage"][data-theme="light"] .session-flow {
  --flow-canvas: color-mix(in srgb, var(--palette-holly-100) 25%, var(--palette-greyscale-100));
  --flow-dot: color-mix(in srgb, var(--palette-greyscale-950) 14%, transparent);
  --flow-card-edge: color-mix(in srgb, var(--palette-greyscale-950) 10%, transparent);
}

/* Light orange look: a site-wide alternative to sage, kept for later (Jaycee, Sep 24).
   Built with LOOK=light-orange, which sets data-look on every page, so Home, Blog and About all match. */
:root.ivory-variation[data-look="light-orange"][data-theme="light"] {
  --theme-surface: color-mix(in srgb, var(--palette-golden-400) 10%, var(--palette-greyscale-50));
  --theme-surface-raised: var(--palette-greyscale-50);
  --theme-surface-raised-strong: color-mix(in srgb, var(--palette-golden-400) 24%, var(--palette-greyscale-50));
  --theme-surface-warm: var(--theme-surface-raised-strong);
}
:root[data-look="light-orange"][data-theme="light"] .ivory-grid { color: color-mix(in srgb, var(--palette-golden-600) 12%, transparent); }
:root[data-look="light-orange"][data-theme="light"] .session-flow {
  --flow-canvas: var(--palette-golden-50);
  --flow-dot: color-mix(in srgb, var(--palette-golden-600) 28%, transparent);
  --flow-card-edge: color-mix(in srgb, var(--palette-golden-600) 22%, transparent);
}
/* Pale yellow buttons with an orange pressed state (Jaycee, Sep 24). */
:root[data-look="light-orange"][data-theme="light"] .qpick {
  --chip-face: var(--palette-golden-50);
  --chip-hover: var(--palette-golden-100);
  --chip-edge: var(--palette-golden-300);
  --chip-outline: var(--palette-golden-300);
}
:root[data-look="light-orange"][data-theme="light"] .qpick > .qchips button[aria-pressed="true"],
:root[data-look="light-orange"][data-theme="light"] .qpick > .qchips button:active {
  background: var(--palette-golden-500);
  border-color: var(--palette-golden-700);
  color: var(--palette-greyscale-950);
  box-shadow: 0 1px 0 var(--palette-golden-700), inset 0 2px 5px color-mix(in srgb, var(--palette-golden-900) 30%, transparent);
}
/* Highlighted source cards stay sage on the warm canvas. */
:root[data-look="light-orange"][data-theme="light"] .feeders-pile .feeder.lit {
  border-color: var(--palette-holly-500);
  box-shadow: 0 0 0 1px var(--palette-holly-500), 0 10px 28px color-mix(in srgb, var(--palette-holly-500) 22%, transparent);
}