/* ==========================================================================
   Common Ground design tokens
   Bold Editorial. Values are copied verbatim from THEME.md section 2 of the
   command-centre theme; this is the only file in which a colour is declared.
   ========================================================================== */

:root {
  color-scheme: light;

  --paper:      #f7f4ec;   /* page plane */
  --surface:    #fbf9f4;   /* widget surface */
  --ink:        #111110;   /* primary ink */
  --ink-2:      #4e4c47;   /* secondary ink */
  --muted:      #6d6a62;   /* axis / meta, dark enough to be read, not only seen */
  --hairline:   #dcd8cc;   /* recessive gridline */
  --rule:       #111110;   /* broadsheet rule */
  --accent:     #e8380d;   /* the one vivid, fills, borders, dots */
  /* The same signal as text. The vivid value is 3.82:1 on paper, which is under the 4.5:1
     AA minimum for normal text, and the type it carries is 10-13px: the per-field
     validation message, the review queue's conflict flags, a connection's error state,
     the masthead health readout. Exactly the content somebody on a glare-lit screen most
     needs. Kept as a second token rather than by darkening --accent, so the theme's one
     vivid colour still reads as vivid where it is a fill or a dot and carries no words.
     Doubles as the fill behind --accent-ink, where white on the vivid value was 3.99:1. */
  --accent-text: #c22c05;
  --accent-ink: #fbf9f4;
  --track:      #e6e2d6;   /* meter track */

  /* The tone ramp, for a chart that has to tell seven things apart without a second
     colour (THEME.md §2.1). Darkest first, one hue, and steps far enough apart to read
     at segment size. Steps 1, 3 and 5 are --ink, --ink-2 and --muted; the ramp is those
     three with the gaps filled in, not a new palette. Nothing outside a chart uses these. */
  --tone-1:     #111110;
  --tone-2:     #33302b;
  --tone-3:     #4e4c47;
  --tone-4:     #6c6a62;
  --tone-5:     #8a877e;
  --tone-6:     #a09d94;
  --tone-7:     #b6b2a8;

  --sans: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --rail-w: 236px;
  --masthead-h: 64px;
}

*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Desktop-first on purpose (THEME.md §3): a tool for a lead at a desk. */
body { min-width: 1080px; }

a { color: inherit; text-decoration: none; }

/* The section label that carries the direction. Muted by default; ink when it is
   itself the heading of a panel. */
.kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  font-weight: 700;
}
.skiplink:focus { left: 0; }

/* One focus treatment everywhere. Ink rather than accent, the accent is reserved
   for status and actions, and a focus ring is neither. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}