/* Resolve brand (chosen by the maintainer, 2026-10-30). Rules: docs/brand/README.md.
   Yellow means one thing: a person has to look or decide here.
   Outcome colours are semantic and never used as the accent. */

:root {
  --paper: #ffffff;        /* sheets, cards */
  --desk: #f2f4f6;         /* page background behind sheets */
  --ink: #17202b;
  --muted: #5a6573;
  --rule: #d6dbe2;
  --accent: #ffe36e;       /* highlighter */
  --accent-ink: #17202b;   /* text on the highlighter */
  --accent-soft: #fff6c7;  /* chosen option, current step */
  --approve: #24774a;
  --request: #b05e0d;
  --escalate: #6a40b2;
  --decline: #b3263a;
  --incomplete: #5a6573;  /* waiting on a fact; not a decision */
  --sans: "Public Sans", "Helvetica Neue", Arial, sans-serif;           /* interface */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;          /* SOP text */
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;     /* IDs, stamps */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #111519; --desk: #181e25; --ink: #e5e9ee; --muted: #9aa5b2; --rule: #2c333c;
  --accent: #e8c547; --accent-ink: #17202b; --accent-soft: #2e2915;
  --approve: #6cc28b; --request: #e59b52; --escalate: #b89af0; --decline: #f07d8d; --incomplete: #9aa5b2; color-scheme: dark } }
:root[data-theme="dark"] {
  --paper: #111519; --desk: #181e25; --ink: #e5e9ee; --muted: #9aa5b2; --rule: #2c333c;
  --accent: #e8c547; --accent-ink: #17202b; --accent-soft: #2e2915;
  --approve: #6cc28b; --request: #e59b52; --escalate: #b89af0; --decline: #f07d8d; --incomplete: #9aa5b2; color-scheme: dark }

/* Wordmark: <span class="wordmark">Resolve</span> */
.wordmark {
  font-family: var(--sans); font-weight: 800; letter-spacing: -.012em; line-height: 1; white-space: nowrap;
  color: var(--ink); padding: 0 .08em;
  background: linear-gradient(transparent 50%, var(--accent) 50%, var(--accent) 92%, transparent 92%);
}
/* Highlight inside SOP text: <mark> */
mark { background: linear-gradient(transparent 8%, var(--accent) 8%, var(--accent) 94%, transparent 94%); color: var(--accent-ink); padding: 0 1px; }
/* Outcome stamps: <span class="stamp o-escalate">Escalate</span> */
.stamp { display: inline-block; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  border: 1.5px solid currentColor; padding: 2px 7px; line-height: 1.3; white-space: nowrap; }
.o-approve { color: var(--approve); } .o-request { color: var(--request); } .o-escalate { color: var(--escalate); } .o-decline { color: var(--decline); }
.o-incomplete { color: var(--incomplete); border-style: dashed; }
/* In dark mode the stroke covers the full letter height, with dark letters on it:
   light letters lose contrast on the stroke, and dark letters vanish above it. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wordmark { background: var(--accent); color: var(--accent-ink); } }
:root[data-theme="dark"] .wordmark { background: var(--accent); color: var(--accent-ink); }

/* The site's additions to the brand kit (docs/brand/tokens.css), appended to it by build.ts into dist/tokens.css.
   Fonts are served from the site: the page is cross-origin isolated for Z3, so it can't load a font CDN's stylesheet. */
@font-face { font-family: "Public Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/public-sans-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/public-sans-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/public-sans-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/public-sans-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/public-sans-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/source-serif-4-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/source-serif-4-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-mono-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-mono-500-normal.woff2") format("woff2"); }


/* The highlighter under a second name, for the tour, whose own CSS (replay/style.css) uses --accent for something else. */
:root { --marker: #ffe36e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --marker: #e8c547; } }
:root[data-theme="dark"] { --marker: #e8c547; }

/* Links that leave the site get an arrow, on every page (the lander, the demo, the tour and the system map all load tokens.css). */
a[href^="http"]::after { content: ""; display: inline-block; width: .7em; height: .7em; margin-left: .25em; vertical-align: .05em; background: currentColor;
  -webkit-mask: var(--ext) no-repeat center / contain; mask: var(--ext) no-repeat center / contain; }
:root { --ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M3.5 1.5h7v7M10.5 1.5l-9 9'/%3E%3C/svg%3E"); }