/*
 * Global semantic color system
 * Dachmarke and general actions stay petrol. Module colors are reserved for
 * concrete Verstehen, Starten and Umsetzen contexts.
 */

body[data-color-scope] {
  --nd-paper: #fbfaf6;
  --nd-ink: #20242a;
  --nd-muted: #5c6670;
  --nd-quiet: #66717a;
  --nd-line: #d9ded5;

  --nd-general: #1d6b66;
  --nd-general-hover: #144f4c;
  --nd-general-soft: #e8f1f0;
  --nd-general-shadow: rgba(29, 107, 102, 0.3);

  --nd-understand: #3f7080;
  --nd-understand-hover: #315c69;
  --nd-understand-soft: #edf3f5;
  --nd-understand-shadow: rgba(63, 112, 128, 0.3);

  --nd-reset: #4f715f;
  --nd-reset-hover: #3f5c4c;
  --nd-reset-soft: #edf2ef;
  --nd-reset-shadow: rgba(79, 113, 95, 0.3);

  --nd-flow: #6d667e;
  --nd-flow-hover: #514a64;
  --nd-flow-soft: #f0edf4;
  --nd-flow-shadow: rgba(109, 102, 126, 0.3);

  --nd-page-accent: var(--nd-general);
  --nd-page-accent-hover: var(--nd-general-hover);
  --nd-page-accent-soft: var(--nd-general-soft);
  --nd-page-shadow: var(--nd-general-shadow);

  --nd-action: var(--nd-general);
  --nd-action-hover: var(--nd-general-hover);
  --nd-action-soft: var(--nd-general-soft);
  --nd-action-shadow: var(--nd-general-shadow);
  --nd-focus-ring: var(--nd-page-accent-hover);

  /* Canonicalize existing near-duplicate tokens without flattening local atmospheres. */
  --quiet: var(--nd-quiet);
  --teal: var(--nd-general);
  --teal-dark: var(--nd-general-hover);
  --understand: var(--nd-understand);
  --understand-dark: var(--nd-understand-hover);
  --understand-soft: var(--nd-understand-soft);
  --reset: var(--nd-reset);
  --reset-dark: var(--nd-reset-hover);
  --reset-soft: var(--nd-reset-soft);
  --agentic: var(--nd-flow);
  --agentic-dark: var(--nd-flow-hover);
  --agentic-soft: var(--nd-flow-soft);
  --flow: var(--nd-flow);
  --flow-dark: var(--nd-flow-hover);
  --flow-soft: var(--nd-flow-soft);
  --violet: var(--nd-flow);
}

body[data-color-scope="understand"] {
  --nd-page-accent: var(--nd-understand);
  --nd-page-accent-hover: var(--nd-understand-hover);
  --nd-page-accent-soft: var(--nd-understand-soft);
  --nd-page-shadow: var(--nd-understand-shadow);
}

body[data-color-scope="reset"] {
  --nd-page-accent: var(--nd-reset);
  --nd-page-accent-hover: var(--nd-reset-hover);
  --nd-page-accent-soft: var(--nd-reset-soft);
  --nd-page-shadow: var(--nd-reset-shadow);
}

body[data-color-scope="flow"] {
  --nd-page-accent: var(--nd-flow);
  --nd-page-accent-hover: var(--nd-flow-hover);
  --nd-page-accent-soft: var(--nd-flow-soft);
  --nd-page-shadow: var(--nd-flow-shadow);
}

/* Stable, opaque focus indicators. Header remains part of the petrol roof brand. */
body[data-color-scope] :where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--nd-focus-ring) !important;
  outline-offset: 3px !important;
}

body[data-color-scope] :where(.global-site-header, .global-nav-mobile) {
  --nd-focus-ring: var(--nd-general-hover);
}

body[data-color-scope] :where(.site-footer, .section-dark-pathfinder) {
  --nd-focus-ring: var(--nd-paper);
}

/* Readable quiet text and text-link states. */
body[data-color-scope] main :where(p, li) > a:not([class]),
body[data-color-scope] main :where(.text-link, .back-link, .page-top-link, .personal-more-link),
body[data-color-scope] main :where(.term-content, .article-body, .article-aside, .context-links) a:not([class]) {
  color: var(--nd-page-accent-hover);
  text-decoration-color: color-mix(in srgb, var(--nd-page-accent) 48%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}

body[data-color-scope] main :where(p, li) > a:not([class]):hover,
body[data-color-scope] main :where(.text-link, .back-link, .page-top-link, .personal-more-link):hover,
body[data-color-scope] main :where(.term-content, .article-body, .article-aside, .context-links) a:not([class]):hover {
  color: var(--nd-page-accent-hover);
  text-decoration-color: currentColor;
}

/* Form boundaries, placeholders and focus states meet the visible UI contrast target. */
body[data-color-scope] :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    textarea,
    select
  ) {
  border-color: #838e88 !important;
}

body[data-color-scope] :where(input, textarea)::placeholder {
  color: var(--nd-muted) !important;
  opacity: 1 !important;
}

body[data-color-scope] :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    textarea,
    select
  ):focus-visible {
  border-color: var(--nd-focus-ring) !important;
  box-shadow: 0 0 0 4px var(--nd-action-soft) !important;
}

/* General button contract. Module containers below replace only the semantic tokens. */
body[data-color-scope] main .button:not(.secondary):not([aria-disabled="true"]) {
  border-color: transparent !important;
  background: var(--nd-action) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  filter: none !important;
}

body[data-color-scope] main .button:not(.secondary):not([aria-disabled="true"]):hover {
  background: var(--nd-action-hover) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  filter: none !important;
}

body[data-color-scope] main .button.secondary:not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--nd-action) 56%, var(--nd-line)) !important;
  background: transparent !important;
  color: var(--nd-action-hover) !important;
  box-shadow: none !important;
  filter: none !important;
}

body[data-color-scope] main .button.secondary:not([aria-disabled="true"]):hover {
  border-color: var(--nd-action) !important;
  background: var(--nd-action-soft) !important;
  color: var(--nd-action-hover) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Concrete module actions: Verstehen. */
body[data-color-scope] :where(
    .hybrid-route-card.is-understand,
    .entry-comparison-card:not(.is-reset):not(.is-flow),
    .stage-card:not(.reset):not(.agentic),
    .path-choice:not(.is-reset):not(.is-agentic),
    .button.module-understand
  ) {
  --nd-action: var(--nd-understand);
  --nd-action-hover: var(--nd-understand-hover);
  --nd-action-soft: var(--nd-understand-soft);
  --nd-action-shadow: var(--nd-understand-shadow);
  --nd-focus-ring: var(--nd-understand);
}

/* Concrete module actions: Starten. */
body[data-color-scope] :where(
    .hybrid-route-card.is-reset,
    .entry-comparison-card.is-reset,
    .stage-card.reset,
    .path-choice.is-reset,
    .button.module-reset,
    .focus-reset-bridge,
    .button.reset-link
  ) {
  --nd-action: var(--nd-reset);
  --nd-action-hover: var(--nd-reset-hover);
  --nd-action-soft: var(--nd-reset-soft);
  --nd-action-shadow: var(--nd-reset-shadow);
  --nd-focus-ring: var(--nd-reset);
}

/* Concrete module actions: Umsetzen. */
body[data-color-scope] :where(
    .hybrid-route-card.is-flow,
    .entry-comparison-card.is-flow,
    .stage-card.agentic,
    .path-choice.is-agentic,
    .button.module-flow
  ) {
  --nd-action: var(--nd-flow);
  --nd-action-hover: var(--nd-flow-hover);
  --nd-action-soft: var(--nd-flow-soft);
  --nd-action-shadow: var(--nd-flow-shadow);
  --nd-focus-ring: var(--nd-flow);
}

/* Module landing-page heroes are concrete offer actions, not roof navigation. */
body[data-color-scope="understand"] .hero-actions {
  --nd-action: var(--nd-understand);
  --nd-action-hover: var(--nd-understand-hover);
  --nd-action-soft: var(--nd-understand-soft);
  --nd-action-shadow: var(--nd-understand-shadow);
  --nd-focus-ring: var(--nd-understand);
}

body[data-color-scope="reset"] .hero-actions {
  --nd-action: var(--nd-reset);
  --nd-action-hover: var(--nd-reset-hover);
  --nd-action-soft: var(--nd-reset-soft);
  --nd-action-shadow: var(--nd-reset-shadow);
  --nd-focus-ring: var(--nd-reset);
}

body[data-color-scope="flow"] :where(.hero-actions, .contact-form-card) {
  --nd-action: var(--nd-flow);
  --nd-action-hover: var(--nd-flow-hover);
  --nd-action-soft: var(--nd-flow-soft);
  --nd-action-shadow: var(--nd-flow-shadow);
  --nd-focus-ring: var(--nd-flow);
}

/* Cross-module buttons carry the destination color, independent of their source page. */
body[data-color-scope] a.button[href="/adhs-verstehen/"] {
  --nd-action: var(--nd-understand);
  --nd-action-hover: var(--nd-understand-hover);
  --nd-action-soft: var(--nd-understand-soft);
  --nd-action-shadow: var(--nd-understand-shadow);
  --nd-focus-ring: var(--nd-understand);
}

body[data-color-scope] a.button[href="/fokus-reset/"] {
  --nd-action: var(--nd-reset);
  --nd-action-hover: var(--nd-reset-hover);
  --nd-action-soft: var(--nd-reset-soft);
  --nd-action-shadow: var(--nd-reset-shadow);
  --nd-focus-ring: var(--nd-reset);
}

body[data-color-scope] a.button[href="/agentic-flow/"] {
  --nd-action: var(--nd-flow);
  --nd-action-hover: var(--nd-flow-hover);
  --nd-action-soft: var(--nd-flow-soft);
  --nd-action-shadow: var(--nd-flow-shadow);
  --nd-focus-ring: var(--nd-flow);
}

/* Disabled offer previews keep their module identity without looking actionable. */
body[data-color-scope] .button.module-flow[aria-disabled="true"] {
  border-color: color-mix(in srgb, var(--nd-flow) 44%, var(--nd-line)) !important;
  background: var(--nd-flow-soft) !important;
  color: var(--nd-flow-hover) !important;
  box-shadow: none !important;
  cursor: default;
}

/* The ADHS contact form continues the Verstehen color in its module context. */
body[data-color-scope="understand"] #kontakt {
  --nd-action: var(--nd-understand);
  --nd-action-hover: var(--nd-understand-hover);
  --nd-action-soft: var(--nd-understand-soft);
  --nd-action-shadow: var(--nd-understand-shadow);
  --nd-focus-ring: var(--nd-understand);
}

/* General orientation contact forms stay petrol. */
body[data-color-scope="reset"] #kontakt,
body[data-color-scope="general"] #kontakt {
  --nd-action: var(--nd-general);
  --nd-action-hover: var(--nd-general-hover);
  --nd-action-soft: var(--nd-general-soft);
  --nd-action-shadow: var(--nd-general-shadow);
  --nd-focus-ring: var(--nd-general-hover);
}

/* Existing module-aware card links receive consistent opaque focus colors. */
body[data-color-scope] .hybrid-route-card.is-understand .hybrid-route-link:focus-visible {
  outline-color: var(--nd-understand) !important;
}

body[data-color-scope] .hybrid-route-card.is-reset .hybrid-route-link:focus-visible {
  outline-color: var(--nd-reset) !important;
}

body[data-color-scope] .hybrid-route-card.is-flow .hybrid-route-link:focus-visible {
  outline-color: var(--nd-flow) !important;
}

@media (max-width: 420px) {
  body[data-color-scope="understand"] #kontakt-title .editorial-accent {
    max-width: 100%;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-color-scope] .button {
    transition: none !important;
  }
}