/*
 * ARBEIT. UND DU. / MINDMAKERS — canonical colour system
 *
 * SURFACE      KICKER        HEADLINE + COPY   CTA                 SQUARE
 * White        dark violet   black             black / white       signal
 * Pale violet  dark violet   black             violet / white      signal
 * Violet       signal        white             black / white       signal
 * Black        signal        white             signal / black      black
 * Signal       black         black             black / white       signal
 *
 * Essential information never relies on the accent colour alone. The darker
 * violet surface is deliberate: white and signal green both remain readable.
 */

:root {
  --brand-violet-readable: var(--violet);
  --brand-violet-surface: var(--violet);

  --surface-light-bg: var(--white);
  --surface-light-fg: var(--black);
  --surface-light-kicker: var(--violet);
  --surface-light-cta-bg: var(--black);
  --surface-light-cta-fg: var(--white);
  --surface-light-cta-square: var(--signal);

  --surface-pale-bg: var(--violet-light);
  --surface-pale-fg: var(--black);
  --surface-pale-kicker: var(--violet);
  --surface-pale-cta-bg: var(--violet);
  --surface-pale-cta-fg: var(--white);
  --surface-pale-cta-square: var(--signal);

  --surface-violet-bg: var(--violet);
  --surface-violet-fg: var(--white);
  --surface-violet-kicker: var(--signal);
  --surface-violet-cta-bg: var(--black);
  --surface-violet-cta-fg: var(--white);
  --surface-violet-cta-square: var(--signal);

  --surface-ink-bg: var(--black);
  --surface-ink-fg: var(--white);
  --surface-ink-kicker: var(--signal);
  --surface-ink-cta-bg: var(--signal);
  --surface-ink-cta-fg: var(--black);
  --surface-ink-cta-square: var(--black);

  --surface-signal-bg: var(--signal);
  --surface-signal-fg: var(--black);
  --surface-signal-kicker: var(--black);
  --surface-signal-cta-bg: var(--black);
  --surface-signal-cta-fg: var(--white);
  --surface-signal-cta-square: var(--signal);
}

/* White and pale editorial canvases share one high-contrast text contract. */
:where(
  main,
  .test-doorway,
  .vertical-content,
  .theme-card,
  .bio,
  .offer-editorial,
  .offer-other-paths,
  .work-tools,
  .mindmakers,
  .about-intro,
  .about-path,
  .article-hero,
  .article-body,
  .article-inline-check,
  .article-faq,
  .article-related,
  .test-hub-featured,
  .test-hub-note,
  .test-intro,
  .test-question-card,
  .test-result-next,
  .profile-hero,
  .profile-context,
  .profile-question,
  .privacy-page,
  .privacy-hero,
  .mm-reality,
  .mm-process,
  .mm-programs,
  .mm-boundary,
  .mm-insight-body,
  .lead-gate,
  .journal-card,
  .product-card,
  .article-faq details,
  [data-tone="paper"]
) {
  --surface-fg: var(--surface-light-fg);
  --surface-kicker: var(--surface-light-kicker);
  --surface-marker: var(--surface-light-kicker);
  --surface-cta-bg: var(--surface-light-cta-bg);
  --surface-cta-fg: var(--surface-light-cta-fg);
  --surface-cta-square: var(--surface-light-cta-square);
}

/* True dark surfaces: no grey body copy and no black editorial text. */
:where(
  .menu-overlay,
  .site-footer,
  .article-footer,
  .hero-simple,
  .process,
  .editorial-statement,
  .office-journal,
  .closing-editorial,
  .about-hero-copy,
  .about-stance,
  .about-next,
  .article-quote,
  .article-conversion,
  .article-author,
  .article-faq details[open],
  .test-hub-hero,
  .test-hub-profile,
  .test-gate-teaser,
  .test-gate-message,
  .test-result-hero,
  .test-result-hero--preview,
  .profile-gate-copy,
  .profile-result-preview,
  .profile-result > header,
  .mm-fields,
  .mm-trust,
  .mm-about,
  .mm-insight-hero,
  .mm-insight-feature,
  .mm-check-hero,
  .mm-check-gate,
  .mm-check-result,
  .product-card-dark,
  [data-tone="ink"]
) {
  --surface-fg: var(--surface-ink-fg);
  --surface-kicker: var(--surface-ink-kicker);
  --surface-marker: var(--surface-ink-kicker);
  --surface-cta-bg: var(--surface-ink-cta-bg);
  --surface-cta-fg: var(--surface-ink-cta-fg);
  --surface-cta-square: var(--surface-ink-cta-square);
}

/* Violet is a dark surface in the content system, never a light canvas. */
:where(
  .mm-contact,
  .mm-check-entry,
  .mm-check-recommendation,
  .product-card-premium,
  [data-tone="violet"]
) {
  --surface-fg: var(--surface-violet-fg);
  --surface-kicker: var(--surface-violet-kicker);
  --surface-marker: var(--surface-violet-kicker);
  --surface-cta-bg: var(--surface-violet-cta-bg);
  --surface-cta-fg: var(--surface-violet-cta-fg);
  --surface-cta-square: var(--surface-violet-cta-square);
  background-color: var(--surface-violet-bg) !important;
}

/* Signal green carries black typography only. */
:where(
  .product-card-signal,
  .tone-green,
  [data-tone="signal"]
) {
  --surface-fg: var(--surface-signal-fg);
  --surface-kicker: var(--surface-signal-kicker);
  --surface-marker: var(--surface-signal-kicker);
  --surface-cta-bg: var(--surface-signal-cta-bg);
  --surface-cta-fg: var(--surface-signal-cta-fg);
  --surface-cta-square: var(--surface-signal-cta-square);
  background-color: var(--surface-signal-bg) !important;
}

/* Every surface supplies the same semantic text roles. Nested surfaces, such
 * as white journal cards on a black rail, inherit their own closest contract. */
:where(
  main,
  .menu-overlay,
  .site-footer,
  .article-footer,
  [data-tone]
) {
  color: var(--surface-fg, var(--surface-light-fg));
}

:where(
  main,
  .menu-overlay,
  .site-footer,
  .article-footer
) :is(h1, h2, h3, p, li, strong, summary, blockquote) {
  color: var(--surface-fg, var(--surface-light-fg)) !important;
  -webkit-text-fill-color: var(--surface-fg, var(--surface-light-fg)) !important;
}

/* One kicker role: one square before the label, never after it. */
:where(main, .article-footer) :is(
  .brand-kicker,
  .panel > small,
  .hero-intro-copy > small,
  .hero-simple-copy > small,
  .panel-copy > small,
  .statement-kicker,
  .test-doorway > div:first-child > small,
  .section-head > small,
  .theme-card > div > small,
  .image-story-head > small,
  .bio > div > small,
  .expertise > small,
  .process > small,
  .offer-editorial-head > div:first-child > small,
  .personal-offer-copy > small,
  .offer-other-paths article > small,
  .tools-heading > small,
  .journal-masthead small,
  .journal-card-kicker,
  .mindmakers-editorial > small,
  .boundary > small,
  .footer-statement > small,
  .about-hero-copy > small,
  .about-intro > small,
  .about-path > header > small,
  .about-stance > small,
  .about-next > small,
  .article-hero > small,
  .article-keyline > span,
  .article-quote > span,
  .article-inline-check > small,
  .article-conversion > small,
  .article-faq > small,
  .article-related > small,
  .article-author > div > small,
  .article-footer-cta > small,
  .test-hub-hero > small,
  .test-hub-section-head > small,
  .test-hub-featured-copy > small,
  .test-hub-note > small,
  .test-intro > div > small,
  .test-question-card > small,
  .test-gate-teaser > small,
  .test-result-hero > small,
  .test-result-next > small,
  .profile-hero > div > small,
  .profile-context > small,
  .profile-question > small,
  .profile-gate-copy > small,
  .profile-result > header > small,
  .profile-result-dimensions > small,
  .profile-top-three > small,
  .profile-result-cta > small,
  .privacy-hero > small,
  .lead-gate-head > span,
  .mm-section-intro > small,
  .mm-signal-list article > small,
  .mm-field-list article > small,
  .mm-program-heading > small,
  .mm-program-copy > small,
  .mm-custom-offer > small,
  .mm-trust > small,
  .mm-about > div > small,
  .mm-contact-intro > small,
  .mm-boundary > small,
  .mm-insight-hero > small,
  .mm-insight-cta > small,
  .mm-insight-sources > small,
  .mm-check-entry > small
) {
  --kicker-color: var(--surface-kicker, var(--surface-light-kicker)) !important;
  color: var(--surface-kicker, var(--surface-light-kicker)) !important;
  -webkit-text-fill-color: var(--surface-kicker, var(--surface-light-kicker)) !important;
}

:where(main, .article-footer) :is(
  .brand-kicker,
  .statement-kicker,
  .journal-card-kicker,
  .panel > small,
  .hero-intro-copy > small,
  .hero-simple-copy > small,
  .panel-copy > small,
  .section-head > small,
  .tools-heading > small,
  .journal-masthead small,
  .mm-section-intro > small,
  .mm-program-heading > small,
  .mm-program-copy > small
)::after {
  content: none !important;
  display: none !important;
}

/* Context, rather than a route-specific class, decides the CTA palette. */
:where(
  main,
  .menu-overlay,
  .site-footer,
  .article-footer
) :is(a, button).brand-action:not(.mela-elementor-action) {
  --action-bg: var(--surface-cta-bg, var(--surface-light-cta-bg)) !important;
  --action-fg: var(--surface-cta-fg, var(--surface-light-cta-fg)) !important;
  --action-square: var(--surface-cta-square, var(--surface-light-cta-square)) !important;
  background: var(--action-bg) !important;
  color: var(--action-fg) !important;
  -webkit-text-fill-color: var(--action-fg) !important;
}

:where(
  main,
  .menu-overlay,
  .site-footer,
  .article-footer
) :is(a, button).brand-action:not(.mela-elementor-action)::after {
  background: var(--action-square) !important;
}

/* Lists and editorial markers follow the same surface contrast. */
:where(main, .article-footer) :is(
  .mm-program-copy > ul > li,
  .mm-field-list li,
  .test-result-steps li,
  .article-list li
)::before {
  color: var(--surface-marker, var(--surface-light-kicker)) !important;
  background-color: var(--surface-marker, var(--surface-light-kicker)) !important;
}

/* Canonical backgrounds for repeated offer cards. */
main [data-tone="paper"] {
  background-color: var(--surface-pale-bg) !important;
}

main [data-tone="ink"] {
  background-color: var(--surface-ink-bg) !important;
}

/* Repeated offer rails have older, deliberately specific card rules. Keep the
 * semantic surface tokens authoritative there as well, so every word and
 * marker resolves from the same palette instead of a route-specific colour. */
main :is(
  .personal-offer-track,
  .mm-program-list,
  .mm-program-slider
) > article[data-tone] {
  --offer-card-fg: var(--surface-fg) !important;
  --offer-card-kicker: var(--surface-kicker) !important;
  --offer-card-marker: var(--surface-marker) !important;
}

main :is(
  .personal-offer-track,
  .mm-program-list,
  .mm-program-slider
) > article[data-tone="paper"] {
  background-color: var(--surface-pale-bg) !important;
}

main :is(
  .personal-offer-track,
  .mm-program-list,
  .mm-program-slider
) > article[data-tone="violet"] {
  background-color: var(--surface-violet-bg) !important;
}

main :is(
  .personal-offer-track,
  .mm-program-list,
  .mm-program-slider
) > article[data-tone="ink"] {
  background-color: var(--surface-ink-bg) !important;
}

main :is(
  .personal-offer-track,
  .mm-program-list,
  .mm-program-slider
) > article[data-tone="signal"] {
  background-color: var(--surface-signal-bg) !important;
}

main :is(
  .personal-offer-track,
  .mm-program-list,
  .mm-program-slider
) > article[data-tone] :is(
  .mm-program-heading h3,
  .mm-program-copy > p,
  .mm-program-copy > ul > li,
  .mm-program-booking > strong
) {
  color: var(--surface-fg) !important;
  -webkit-text-fill-color: var(--surface-fg) !important;
}

main :is(
  .personal-offer-track,
  .mm-program-list,
  .mm-program-slider
) > article[data-tone] :is(
  .mm-program-heading > small,
  .mm-program-copy > small
) {
  --kicker-color: var(--surface-kicker) !important;
  color: var(--surface-kicker) !important;
  -webkit-text-fill-color: var(--surface-kicker) !important;
}

main :is(
  .personal-offer-track,
  .mm-program-list,
  .mm-program-slider
) > article[data-tone] .mm-program-copy > ul > li::before {
  background-color: var(--surface-marker) !important;
}