/* V4 pairs terracotta and amber accents with warm, quiet reading surfaces. */
:root[data-design="v4"] {
  --m5-page: #f4f5f7;
  --m5-surface: #fcfdff;
  --m5-surface-soft: #f5f6f8;
  --m5-surface-raised: #edf0f5;
  --m5-featured: #f5f6f8;
  --m5-ink: #19243e;
  --m5-text: #2d3b55;
  --m5-muted: #53627b;
  --m5-border: #c4cad3;
  --m5-border-soft: #dfe3e9;
  --m5-border-strong: #a88160;
  --m5-link: #3153ba;
  --m5-accent: #b3511d;
  --m5-accent-hover: #913c13;
  --m5-on-accent: #ffffff;
  --m5-coral: #b3511d;
  --m5-blue: #466b73;
  --m5-purple: #906326;
  --m5-blue-soft: #eaf0ef;
  --m5-purple-soft: #f5ead5;
  --m5-warm-soft: #faeddf;
  --m5-selected-bg: #f5e4ce;
  --m5-selected-ink: #7b421e;
  --m5-focus: #a65322;
  --m5-shadow: #253f7310;
  --m5-cloud-1: #97501f;
  --m5-cloud-2: #b3511d;
  --m5-cloud-3: #536e49;
  --m5-cloud-4: #906326;
  --m5-cloud-5: #466b73;
  --m5-cloud-hover: #edf0f5;
  --m5-cloud-count: #f5e4ce;
  --m5-cloud-footer: #fcfdff;
  --v2-button-bg: #fcfdff;
  --v2-cloud-bg: #fcfdff;
  --v2-group-edge: #c4cad3;
  --v2-share-bg: #faeddf;
  --v2-share-hover: #f5dfc4;
  --v2-share-edge: #c38a59;
  --v3-glow-blue: #eab77720;
  --v3-glow-violet: #e2b88318;
  --v3-glow-teal: #c6c39e16;
  --v3-orbit-blue: #c7a174;
  --v3-orbit-violet: #cfb58e;
  --v3-nav: #f9fbfff0;
  --v3-panel: #fafcffd9;
  --v3-footer: #f2f5fce8;
}

:root[data-design="v4"][data-theme="dark"] {
  --m5-page: #15120f;
  --m5-surface: #25211d;
  --m5-surface-soft: #2d2721;
  --m5-surface-raised: #372e25;
  --m5-featured: #2d2721;
  --m5-ink: #f0e6d9;
  --m5-text: #d8cbbb;
  --m5-muted: #b9aa98;
  --m5-border: #655341;
  --m5-border-soft: #463a2e;
  --m5-border-strong: #b38b60;
  --m5-accent: #edaa68;
  --m5-accent-hover: #f4c18e;
  --m5-on-accent: #2d1b0e;
  --m5-link: #eabc89;
  --m5-selected-bg: #493421;
  --m5-selected-ink: #f5c994;
  --m5-focus: #edaa68;
  --m5-shadow: #00000030;
  --m5-cloud-1: #eabc89;
  --m5-cloud-2: #edaa68;
  --m5-cloud-3: #b5c59b;
  --m5-cloud-4: #d5b879;
  --m5-cloud-5: #9cbec2;
  --m5-coral: #edaa68;
  --m5-blue: #9cbec2;
  --m5-purple: #d5b879;
  --m5-blue-soft: #263537;
  --m5-purple-soft: #3c3222;
  --m5-warm-soft: #382b20;
  --m5-cloud-hover: #372e25;
  --m5-cloud-count: #493421;
  --m5-cloud-footer: #25211d;
  --v2-button-bg: #2d2721;
  --v2-cloud-bg: #25211d;
  --v2-group-edge: #655341;
  --v2-share-bg: #382b20;
  --v2-share-hover: #493421;
  --v2-share-edge: #a67a4d;
  --v3-glow-blue: #c4783652;
  --v3-glow-violet: #ce9a4240;
  --v3-glow-teal: #49867b38;
  --v3-glow-pearl: #f5c9940c;
  --v3-orbit-blue: #b38b60;
  --v3-orbit-violet: #af956e;
  --v3-nav: #211c17f2;
  --v3-panel: #25211de6;
  --v3-footer: #211c17eb;
}

:root[data-design="v4"][data-theme="dark"] .site-backdrop svg {
  opacity: .48;
}

/* Shared dark containers otherwise replace the design palette with local slate tokens. */
:root[data-design="v4"][data-theme="dark"] :is(.content-container, .content-card) {
  --m5-surface: inherit;
  --m5-surface-soft: inherit;
  --m5-surface-raised: inherit;
  --m5-ink: inherit;
  --m5-text: inherit;
  --m5-muted: inherit;
  --m5-link: inherit;
  --m5-border: inherit;
  --m5-border-soft: inherit;
  --m5-border-strong: inherit;
  --m5-selected-bg: inherit;
  --m5-selected-ink: inherit;
  --m5-focus: inherit;
  --m5-accent: inherit;
  --m5-accent-hover: inherit;
  --m5-on-accent: inherit;
  --v2-button-bg: inherit;
  --v2-share-bg: inherit;
  --v2-share-hover: inherit;
  --v2-share-edge: inherit;
}

:root[data-design="v4"][data-theme="dark"] .container-raised {
  --container-fill: var(--m5-surface-raised);
}

:root[data-design="v4"][data-theme="dark"] .container-quiet {
  --container-fill: var(--m5-surface-soft);
}

:root[data-design="v4"] .site-footer,
:root[data-design="v4"][data-theme="dark"] .site-footer {
  --m5-link: inherit;
  --m5-muted: inherit;
  --m5-focus: inherit;
}

:root[data-design="v4"] .article-topics {
  border-bottom-color: var(--m5-border-soft);
}

:root[data-design="v4"] .article-topics a {
  padding-inline: 10px;
  border-color: transparent;
  border-radius: 6px;
  color: var(--m5-text);
  background: transparent;
}

:root[data-design="v4"] .article-topics a:hover {
  border-color: var(--m5-border-strong);
  background: var(--m5-warm-soft);
}

:root[data-design="v4"] .article-topics a.selected {
  border-color: var(--m5-border-strong);
  background: var(--m5-selected-bg);
  color: var(--m5-selected-ink);
  font-weight: 650;
}

:root[data-design="v4"] .article-topics span {
  color: var(--m5-muted);
  font-weight: 400;
  opacity: 1;
}

:root[data-design="v4"] .article-workspace {
  --container-card-fill: var(--m5-surface);
  --container-card-hover: var(--m5-warm-soft);
  --container-card-edge: var(--m5-border);
  background: var(--m5-surface-soft);
}

:root[data-design="v4"] .search-results-articles {
  gap: 20px;
}

:root[data-design="v4"] .search-results-articles .content-card {
  --card-accent: var(--m5-coral);
  --card-shadow: 0 3px 10px var(--m5-shadow);
  padding: 22px 24px;
}

:root[data-design="v4"] .search-results-articles .content-card:nth-child(4n + 2) {
  --card-accent: var(--m5-purple);
}

:root[data-design="v4"] .search-results-articles .content-card:nth-child(4n + 3) {
  --card-accent: var(--m5-cloud-3);
}

:root[data-design="v4"] .search-results-articles .content-card:nth-child(4n + 4) {
  --card-accent: var(--m5-blue);
}

:root[data-design="v4"] .search-results-articles .search-result-copy {
  gap: 10px;
}

:root[data-design="v4"] .search-results-articles .search-result-type {
  align-self: flex-start;
  padding: 3px 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--card-accent) 12%, var(--m5-surface));
  color: var(--card-accent);
  font-size: .65rem;
  letter-spacing: .12em;
}

:root[data-design="v4"] .search-results-articles .search-result-title {
  color: var(--m5-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
}

:root[data-design="v4"] .search-results-articles .search-result-snippet {
  color: var(--m5-muted);
  font-size: .9rem;
  line-height: 1.6;
}

:root[data-design="v4"] .search-results-articles .search-result-arrow {
  color: var(--card-accent);
}

@media (max-width: 600px) {
  :root[data-design="v4"] .search-results-articles {
    gap: 14px;
  }

  :root[data-design="v4"] .search-results-articles .content-card {
    padding: 18px 20px;
  }

  :root[data-design="v4"] .search-results-articles .search-result-title {
    font-size: 1.25rem;
  }
}