/* Default palette tokens and overrides (Graphite / System) — what ships.
   The other palettes and layouts live in design-lab-variants.css (not deployed). */

html {
  --ink: #101411;
  --paper: #f0f1e8;
  --acid: #d1f59a;
  --accent-ink: #18220e;
  --muted: #afb7a8;
  --subtle: #95a18b;
  --surface: #161d17;
  --surface-strong: #222d20;
  --header-bg: rgb(16 20 17 / 94%);
  --line: rgb(240 241 232 / 18%);
  --strong-line: #596c4b;
  --grid-line: rgb(240 241 232 / 4%);
  --case-bg: #f0f1e8;
  --case-ink: #172013;
  --case-muted: #5c6954;
  --case-line: rgb(23 32 19 / 19%);
  --case-art: #e3e7d9;
  --case-accent: #527332;
  --dark-line: var(--case-line);
  --serif: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  color-scheme: dark;
}

/* Complete token coverage, including the original inline diagram colours. */

.site-shell .site-header {
  background: var(--header-bg);
}

.site-shell .nav-links a {
  color: var(--muted);
}

.site-shell .nav-links a:hover {
  color: var(--acid);
}

.site-shell .language-switch > span {
  color: var(--subtle);
}

.site-shell .language-switch button:hover {
  color: var(--paper);
  background: var(--surface-strong);
}

.site-shell .language-switch button[aria-pressed="true"],
.site-shell .language-switch button[aria-pressed="true"]:hover,
.site-shell .language-switch button.active,
.site-shell .flow-tab[aria-selected="true"],
.site-shell .flow-tab.active {
  color: var(--accent-ink);
  background: var(--acid);
}

.site-shell .flow-tab[aria-selected="true"]:focus-visible {
  outline-color: var(--accent-ink);
}

.site-shell .hero::before {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
}

.site-shell .hero-visual::before {
  background: radial-gradient(
    ellipse,
    color-mix(in srgb, var(--acid) 10%, transparent),
    transparent 67%
  );
}

.site-shell .coordinate,
.site-shell .map-caption,
.site-shell .map-demo,
.site-shell .hero-foot small,
.site-shell .panel-label,
.site-shell .step-number,
.site-shell .flow-step small,
.site-shell .panel-note,
.site-shell .method-number,
.site-shell .principles span,
.site-shell .contact-note,
.site-shell .footer-top > p,
.site-shell .footer-bottom,
.site-shell .footer-note {
  color: var(--subtle);
}

.site-shell .hero-description,
.site-shell #flow-description,
.site-shell .flow-bottom p,
.site-shell .method-grid p,
.site-shell .contact > p:not(.eyebrow),
.site-shell .footer-links {
  color: var(--muted);
}

.site-shell .hero-foot span {
  color: var(--paper);
}

.site-shell .motion-toggle {
  color: var(--muted);
  background: var(--ink);
}

.site-shell .motion-toggle:hover {
  color: var(--acid);
}

.site-shell .button.primary,
#brief-dialog .button.primary,
.skip-link {
  color: var(--accent-ink);
  background: var(--acid);
  border-color: var(--acid);
}

.site-shell .button.primary:hover,
#brief-dialog .button.primary:hover {
  background: color-mix(in srgb, var(--acid) 87%, var(--paper));
  border-color: transparent;
}

.site-shell .button.secondary,
#brief-dialog .button.secondary {
  color: var(--paper);
}

.site-shell .button.secondary:hover,
#brief-dialog .button.secondary:hover {
  background: var(--surface-strong);
  border-color: var(--strong-line);
}

.site-shell .flow-tab,
.site-shell .workflow-panel {
  background: var(--surface);
}

.site-shell .flow-tab {
  color: var(--muted);
}

.site-shell .flow-tab:hover {
  background: var(--surface-strong);
}

.site-shell .flow-tab[aria-selected="true"]:hover {
  color: var(--accent-ink);
  background: var(--acid);
}

.site-shell .status-chip {
  color: var(--muted);
  border-color: var(--strong-line);
}

.site-shell .flow-steps {
  border-top-color: var(--strong-line);
}

.site-shell .step-number::before {
  border-color: var(--subtle);
}

.site-shell .contact {
  background: var(--surface-strong);
}

.site-shell .contact-symbol {
  color: color-mix(in srgb, var(--acid) 8%, transparent);
}

.site-shell .evidence {
  color: var(--case-ink);
  background: var(--case-bg);
}

.site-shell .evidence .eyebrow,
.site-shell .case-type,
.site-shell .case-state {
  color: var(--case-accent);
}

.site-shell .evidence .section-heading > p:not(.eyebrow),
.site-shell .case-card > p:not(.case-type):not(.case-result):not(.case-state) {
  color: var(--case-muted);
}

.site-shell .evidence :focus-visible {
  outline-color: var(--case-ink);
}

.site-shell .case-art {
  color: var(--case-ink);
  background-color: var(--case-art);
  border-color: var(--case-line);
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--case-line) 30%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--case-line) 30%, transparent) 1px,
      transparent 1px
    );
}

.site-shell .case-art::after {
  color: var(--case-accent);
}

.site-shell .case-state::before {
  background: var(--case-accent);
}

.site-shell .case-grid,
.site-shell .case-card + .case-card {
  border-color: var(--case-line);
}

.site-shell .footer-links a:hover {
  color: var(--acid);
}

#system-map [stop-color] {
  stop-color: var(--acid);
}

#system-map [fill="#687569"] {
  fill: var(--muted);
}

#system-map [stroke="#71806a"],
#system-map [stroke="#566450"] {
  stroke: var(--strong-line);
}

#system-map [stroke="#d1f59a"] {
  stroke: var(--acid);
}

#system-map [fill="#d1f59a"] {
  fill: var(--acid);
}

#system-map [fill="#131c16"] {
  fill: var(--surface);
}

#system-map [fill="#18231a"] {
  fill: var(--surface-strong);
}

#system-map [fill="#c1cbbd"] {
  fill: var(--paper);
}

#system-map [stroke="#e8f3df"] {
  stroke: var(--paper);
}

#brief-dialog {
  color: var(--paper);
  border-color: var(--strong-line);
  background: var(--surface);
}

#brief-dialog::backdrop {
  background: rgb(5 10 16 / 77%);
}

#brief-dialog .icon-button {
  color: var(--paper);
}

#brief-dialog .icon-button:hover {
  color: var(--accent-ink);
  background: var(--acid);
}

#brief-form label {
  color: var(--paper);
}

#brief-form select,
#brief-form textarea,
#brief-form input {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--strong-line);
}

#brief-form textarea::placeholder,
#brief-form input::placeholder,
#brief-dialog .form-note {
  color: var(--subtle);
}

#brief-dialog .brief-output {
  border-color: var(--strong-line);
  background: var(--surface-strong);
}

#brief-dialog .brief-output pre {
  color: var(--paper);
}

@media (max-width: 620px) {
  .site-shell .nav-links {
    background: var(--surface);
    border-bottom-color: var(--strong-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-shell *,
  .site-shell *::before,
  .site-shell *::after,
  #brief-dialog,
  #brief-dialog * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body.motion-paused .site-shell *,
body.motion-paused .site-shell *::before,
body.motion-paused .site-shell *::after {
  animation-play-state: paused !important;
}