/* Worth Keeping — shared styles for digital assets
   Tokens pasted verbatim from:
   deliverables/worth-keeping-final-brand/identity/tokens/design-tokens.css
   Spectrum discipline: spectrum colors are accents only (borders, chips,
   thin bars, small fills) — <=8% of composition area by default, 15% max.
   Never section backgrounds, never body-copy fill, never adjacent-rainbow
   outside the canonical spectrum bar / palette section. */

:root {
  --wk-spectrum-violet: #5B3FF5;
  --wk-spectrum-blue: #178CEA;
  --wk-spectrum-cyan: #20D8CD;
  --wk-spectrum-magenta: #F02CA6;
  --wk-spectrum-orange: #FF633E;
  --wk-spectrum-yellow: #F0DD25;
  --wk-spectrum-green: #43E05B;

  --wk-ink: #050505;
  --wk-graphite: #171717;
  --wk-steel: #5E6269;
  --wk-mist: #D8D5CF;
  --wk-paper: #F4F0E7;
  --wk-white: #FFFFFF;

  --wk-success: #157A3B;
  --wk-warning: #B65E00;
  --wk-error: #B3261E;
  --wk-info: #1266A8;
  --wk-focus: #20D8CD;

  --wk-font-display: "Archivo Black", "Arial Black", Arial, sans-serif;
  --wk-font-body: "DM Sans", Arial, sans-serif;
  --wk-font-registry: "DM Mono", SFMono-Regular, Consolas, monospace;

  --wk-space-1: 0.25rem;
  --wk-space-2: 0.5rem;
  --wk-space-3: 0.75rem;
  --wk-space-4: 1rem;
  --wk-space-5: 1.5rem;
  --wk-space-6: 2rem;
  --wk-space-7: 3rem;
  --wk-space-8: 4rem;
  --wk-space-9: 6rem;
  --wk-space-10: 9rem;

  --wk-motion-fast: 160ms;
  --wk-motion-standard: 220ms;
  --wk-motion-slow: 360ms;
  --wk-motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --wk-spectrum-max-area: 15%;
  --wk-spectrum-default-area: 8%;

  --wk-line: #363636;
  --wk-line-paper: #b3afa7;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --wk-motion-fast: 0ms;
    --wk-motion-standard: 0ms;
    --wk-motion-slow: 0ms;
  }
  * , *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

@font-face { font-family: "Archivo Black"; src: url("./assets/fonts/ArchivoBlack-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("./assets/fonts/DMSans-Variable.ttf") format("truetype"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("./assets/fonts/DMMono-Regular.ttf") format("truetype"); font-display: swap; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--wk-ink); }
body {
  margin: 0;
  background: var(--wk-ink);
  color: var(--wk-paper);
  font: 400 16px/1.5 var(--wk-font-body);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--wk-focus); outline-offset: 3px; }

/* ---- shared typographic components ---- */

.eyebrow {
  margin: 0 0 var(--wk-space-4);
  font: 500 11px/1.35 var(--wk-font-registry);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wk-spectrum-cyan);
}
.eyebrow--steel { color: var(--wk-steel); }

.display {
  margin: 0;
  font-family: var(--wk-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.05em;
  line-height: .85;
}

.registry {
  font: 500 11px/1.5 var(--wk-font-registry);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Evidence chips — DM Mono status labels, doubles as design element */
.chip {
  display: inline-block;
  padding: 5px 9px;
  border: 1px solid var(--wk-steel);
  font: 500 10px/1 var(--wk-font-registry);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: inherit;
}
.chip--planned { border-color: var(--wk-spectrum-yellow); }
.chip--approved { border-color: var(--wk-spectrum-green); }
.chip--illustrative { border-color: var(--wk-spectrum-magenta); }

/* Buttons per component-style-guide */
.button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--wk-paper);
  background: var(--wk-paper);
  color: var(--wk-ink);
  font: 700 16px/1 var(--wk-font-body);
  cursor: pointer;
  transition: background var(--wk-motion-standard) var(--wk-motion-ease),
              color var(--wk-motion-standard) var(--wk-motion-ease);
}
.button:hover { background: var(--wk-spectrum-cyan); border-color: var(--wk-spectrum-cyan); }
.button:active { transform: translateY(1px); }
.button--outline { background: transparent; color: var(--wk-paper); }
.button--outline:hover { background: transparent; color: var(--wk-spectrum-cyan); }

/* Canonical spectrum bar — the one sanctioned adjacent-rainbow usage */
.spectrum-bar { display: grid; grid-template-columns: repeat(7, 1fr); height: 8px; }
.spectrum-bar i:nth-child(1) { background: var(--wk-spectrum-violet); }
.spectrum-bar i:nth-child(2) { background: var(--wk-spectrum-blue); }
.spectrum-bar i:nth-child(3) { background: var(--wk-spectrum-cyan); }
.spectrum-bar i:nth-child(4) { background: var(--wk-spectrum-magenta); }
.spectrum-bar i:nth-child(5) { background: var(--wk-spectrum-orange); }
.spectrum-bar i:nth-child(6) { background: var(--wk-spectrum-yellow); }
.spectrum-bar i:nth-child(7) { background: var(--wk-spectrum-green); }

/* Spectrum accent utilities — borders/rules only */
.acc-violet  { border-color: var(--wk-spectrum-violet)  !important; }
.acc-blue    { border-color: var(--wk-spectrum-blue)    !important; }
.acc-cyan    { border-color: var(--wk-spectrum-cyan)    !important; }
.acc-magenta { border-color: var(--wk-spectrum-magenta) !important; }
.acc-orange  { border-color: var(--wk-spectrum-orange)  !important; }
.acc-yellow  { border-color: var(--wk-spectrum-yellow)  !important; }
.acc-green   { border-color: var(--wk-spectrum-green)   !important; }

/* Ink-fill master SVGs rendered on the dark ground: invert the ink strokes
   to near-white (brightness alone leaves them dark gray) */
.mark-on-dark { filter: invert(1); }