/* DIGITAL Brand Kit 2026 shared rendering contract.
 *
 * This file loads after each surface stylesheet so the public journeys,
 * dialogs, Charlie viewer, microsites, and embedded presenter use one palette
 * and type system even when their layouts remain intentionally different.
 */
:root {
  --blue: #250E62;
  --ink: #250E62;
  --purple: #7734AC;
  --pink: #E31E79;
  --violet: #CFC1F5;
  --lilac: #E2D6F6;
  --blush: #FDF0F7;
  --paper: #FBFAFD;
  --lavender: #E2D6F6;
  --line: color-mix(in srgb, var(--blue) 16%, transparent);
  --muted: color-mix(in srgb, var(--blue) 70%, white);
  --white: #fff;
  /* Pink carries the kit's accent, but #E31E79 sits at 4.3:1 on paper and
     3.6:1 on the blue ground — under AA either way at the small sizes the
     labels use. These two are the same hue moved far enough to clear 4.5:1;
     the fill pink is left alone, so buttons and rules keep the kit colour. */
  --pink-ink: color-mix(in srgb, var(--pink) 83%, var(--blue));
  --pink-on-dark: color-mix(in srgb, var(--pink) 57%, white);
  --font-head: "Aptos Display", "Aptos", Arial, Helvetica, sans-serif;
  --font: Arial, Helvetica, sans-serif;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-head);
}

/* Approved light grounds replace the legacy neutral greys. */
.pathways,
.area-page,
.project-portfolio,
.domain-blueprint,
.foundation-system,
.impact-exchange,
.domain-dossier,
.impact-dialog,
.transcript {
  color: var(--blue);
  background-color: var(--paper);
}

.atlas,
.panel,
.foundation-dialog-lede,
.impact-dialog-body,
.visual-frame,
.visual-frame-veil {
  background-color: var(--lilac);
}

/* Dark presentation surfaces use only the two structural primaries. */
.lobby-intro,
.pathways-intro,
.project-question,
.project-dossier-identity,
.foundation-dialog-head,
.domain-dossier-head,
.impact-dialog-head,
.impact-adoption-source {
  background:
    radial-gradient(circle at 86% 0, color-mix(in srgb, var(--purple) 58%, transparent), transparent 34%),
    linear-gradient(135deg, var(--blue), color-mix(in srgb, var(--blue) 72%, var(--purple)));
}

/* Category distinctions stay legible while remaining inside the approved
   palette. Pink is reserved for the AI category and small active accents. */
.cat-construction {
  --accent: var(--purple) !important;
  --project-accent: var(--purple) !important;
  --project-tint: color-mix(in srgb, var(--purple) 10%, transparent) !important;
}
.cat-timber,
.cat-modular,
.cat-workforce {
  --accent: var(--blue) !important;
  --project-accent: var(--blue) !important;
  --project-tint: color-mix(in srgb, var(--blue) 9%, transparent) !important;
}
.cat-ai {
  --accent: var(--pink-ink) !important;
  --project-accent: var(--pink-ink) !important;
  --project-tint: color-mix(in srgb, var(--pink) 9%, transparent) !important;
}
.cat-permitting,
.cat-indigenous {
  --accent: var(--purple) !important;
  --project-accent: var(--purple) !important;
  --project-tint: color-mix(in srgb, var(--purple) 10%, transparent) !important;
}

/* Theme accents originate in the evidence model. They must not introduce a
   seventh visual colour when rendered as cards, claims, or presenter regions. */
.page,
.sheetpage {
  --accent: var(--purple) !important;
}

/* The three secondary pages are drawn on one blueprint, so the ink that
   blueprint is drafted in is set once for all of them. */
.domain-blueprint,
.domain-question,
.domain-dossier,
.foundation-system,
.foundation-question,
.impact-exchange,
.impact-question {
  --blueprint: var(--blue) !important;
}

.domain-blueprint-head > span i,
.foundation-core > span i,
.impact-exchange-head > span i,
.foundation-core small i,
.foundation-question-copy small > i {
  background: var(--purple);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--purple) 14%, transparent);
}

.foundation-question-progress,
.project-question-progress,
.impact-question-progress {
  background: linear-gradient(90deg, var(--purple), var(--pink), var(--blue));
}

/* Impact previously used a separate green product palette, then a violet one
   for the dark exchange it no longer has. The exchange is now the same light
   blueprint Foundations and Domains are drawn on, so its accent is the kit's
   purple like theirs. */
.impact-exchange {
  --impact-green: var(--purple);
}

.modal-charlie-head-impact {
  --charlie-accent: var(--purple);
  --charlie-accent-soft: var(--lilac);
}

.modal-charlie-head-impact .modal-charlie-head-mark,
.impact-investment-core {
  background: radial-gradient(circle at 35% 28%, var(--purple), var(--blue) 72%);
}

.impact-question::before,
.impact-conversations a > span,
.impact-adoption-lanes > section > header,
.impact-adoption-lanes article > span {
  background: var(--purple);
}

.impact-dialog-body section > header small,
.impact-conversations a small,
.impact-conversations a b,
.impact-adoption-lanes article small {
  color: var(--purple);
}

.impact-dialog-body section > header h3,
.impact-conversations a,
.impact-investment-groups article strong,
.impact-adoption-lanes article strong {
  color: var(--blue);
}

.impact-investment-groups article,
.impact-adoption-lanes > section {
  border-color: var(--line);
  background: var(--blush);
}

.impact-investment-groups article p,
.impact-adoption-lanes article p,
.impact-dialog-lede {
  color: var(--muted);
}

.impact-conversations a:hover {
  border-color: var(--purple);
}

/* Focus indicators use the kit's approved pink, not lighter unofficial tints. */
:where(a, button, input, select, textarea, [role="button"]):focus-visible {
  outline-color: var(--pink);
}