/* The colour rule, in one file, linked first by every layout.

   Four meanings, one colour each — never reuse one for another. See
   docs/design/style-guide.md, and OrderCandidate::StatusRegistry, which names
   a tone per status so the board and the proofing screen cannot colour the
   same status two different ways (audit 2026-09-02 #21).

     accent  blue   an action the reviewer takes, or an override they made
     warn    red    needs the reviewer's eyes before approval
     ok      green  entered
     neutral grey   parked, or not yet decided
     muted   grey   off the queue entirely

   Neutral and muted are two tints of the ONE grey, not a fifth meaning: the
   darker carries white text, the lighter carries its own. Values are the
   proofing screen's --n700 and --n200; the board had its own palette, and
   that is the drift this file ends. */

:root {
  --tone-accent: #1a73e8;
  --tone-warn: #d93025;
  --tone-ok: #188038;
  --tone-neutral: #5f6368;
  --tone-muted: #e8eaed;

  /* Red, in the two tints the rule asks for: --warn draws the border or the
     outline, --warn-deep writes the text, --warn-bg tints behind it. They lived
     in proofing.css, which the board never loads — which is how the board's
     "⚠ client" flag ended up amber, a fifth colour outside the rule. */
  --warn: #d93025;
  --warn-bg: #fce8e6;
  --warn-deep: #b3261e;

  /* What reads on a tone. Only the light grey needs dark ink. */
  --tone-ink: #ffffff;
  --tone-muted-ink: #5f6368;

  /* The spacing scale. Nineteen ad-hoc padding and margin values had grown up
     on the proofing screen while :root tokenized only colour and type (audit
     2026-09-02 #26); six steps and one gutter replace them, and
     test/stylesheet_test.rb keeps a stray px out. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-gutter: 40px;
}

/* Text for assistive technology only: a cell's state, said out loud for the
   reviewer working the screen from the keyboard, where a hover tooltip says
   nothing. Kept in the layer both screens load so there is one definition. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The staging banner (layouts/_environment_label). Lives here because every
   layout loads tokens.css and the banner must show on every screen. Red family:
   it is the one stripe that is a warning rather than a state, and it must read
   as one before the reviewer reads anything else. flex: none so the proofing
   body's column layout gives it its own height instead of squeezing it. */
.envbar { flex: none; padding: 6px 18px; font-size: 13px; background: var(--warn-bg); color: var(--warn-deep); border-bottom: 1px solid var(--warn); }