/* The four operational signals -- fault, watch, clear, unknown -- mean one thing each, so
   nothing else may borrow them. `action` exists because `clear` was carrying every text
   action, link and focus ring as well as its own meaning, which made a field of unobserved
   checks read as a field of passing ones. Like `amber`, it sits outside the signal set on
   purpose and must never encode a check status.

   Themes: `:root` is light, the media query follows the system unless a choice is stored,
   and `[data-theme]` lets that stored choice win in both directions. */
:root {
  --paper: #f0f2f6;
  --paper-deep: #d2d5db;
  --ink: #18191c;
  --muted: #595b5e;
  --line: #b8bbc2;
  --line-dark: #9b9ea5;
  --fault: #a32510;
  --watch: #735502;
  --clear: #006a40;
  --unknown: #5a5b5c;
  --action: #005c9a;
  --action-strong: #004475;
  --focus: #006cb4;
  --focus-command: #86c4fe;
  --edge: #6f7175;
  --command-dim: #b6b7ba;
  --command-rule: #5c5e61;
  --command-lift: #2f3033;
  --amber: #f8b65d;
  --brand: #996305;
  --surface-veil: rgba(240, 242, 246, .94);
  --scrim: rgba(24, 25, 28, .42);
  --grid-rule: rgba(24, 25, 28, .045);
  --row-hover: rgba(24, 25, 28, .05);
  --row-tint: rgba(24, 25, 28, .025);
  --lamp-lift: 0 2px 7px rgba(24, 25, 28, .24);
  --pulse-glow: 0 3px 10px rgba(0, 106, 64, .4);
  --display: 'Manrope Variable', 'Avenir Next', sans-serif;
  --data: 'IBM Plex Mono', ui-monospace, monospace;
  --text-display: clamp(3.4rem, 6.8vw, 6rem);
  --text-lede: clamp(1.05rem, 1.5vw, 1.28rem);
  --text-figure: 1.65rem;
  --text-headline: 1.25rem;
  --text-title: .96rem;
  --text-body: .82rem;
  --text-label: .7rem;
  --track-display: -.04em;
  --track-label: .06em;
  --track-lockup: .08em;
  --space-tight: 7px;
  --space-compact: 12px;
  --space-standard: 16px;
  --space-roomy: 18px;
  --space-section: 24px;
  --space-field: 48px;

  /* Four durations, because a control acknowledging a press and a panel opening are not the
     same event. Nothing here is decorative for its own sake: every use is either feedback
     that a control heard you, or a change of state the eye would otherwise have to hunt for. */
  --dur-quick: 110ms;
  --dur-settle: 180ms;
  --dur-reveal: 260ms;
  --ease-out: cubic-bezier(.22, .78, .3, 1);
  --ease-signal: cubic-bezier(.4, 0, .2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111315;
    --paper-deep: #35373a;
    --ink: #eaebed;
    --muted: #a4a4a6;
    --line: #4b4d51;
    --line-dark: #616368;
    --fault: #f9826b;
    --watch: #ecbd57;
    --clear: #67d89c;
    --unknown: #a7a8a9;
    --action: #83c1fb;
    --action-strong: #b9dcfe;
    --focus: #86c4fe;
    --focus-command: #26679e;
    --edge: #7f8083;
    --command-dim: #595b5e;
    --command-rule: #aaacb0;
    --command-lift: #d1d2d5;
    --amber: #8e5b00;
  --brand: #e3a95e;
    --surface-veil: rgba(17, 19, 21, .94);
    --scrim: rgba(0, 0, 0, .62);
    --grid-rule: rgba(234, 235, 237, .05);
    --row-hover: rgba(234, 235, 237, .055);
    --row-tint: rgba(234, 235, 237, .03);
    --lamp-lift: 0 2px 7px rgba(0, 0, 0, .55);
    --pulse-glow: 0 3px 10px rgba(103, 216, 156, .4);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #111315;
  --paper-deep: #35373a;
  --ink: #eaebed;
  --muted: #a4a4a6;
  --line: #4b4d51;
  --line-dark: #616368;
  --fault: #f9826b;
  --watch: #ecbd57;
  --clear: #67d89c;
  --unknown: #a7a8a9;
  --action: #83c1fb;
  --action-strong: #b9dcfe;
  --focus: #86c4fe;
  --focus-command: #26679e;
  --edge: #7f8083;
  --command-dim: #595b5e;
  --command-rule: #aaacb0;
  --command-lift: #d1d2d5;
  --amber: #8e5b00;
  --brand: #e3a95e;
  --surface-veil: rgba(17, 19, 21, .94);
  --scrim: rgba(0, 0, 0, .62);
  --grid-rule: rgba(234, 235, 237, .05);
  --row-hover: rgba(234, 235, 237, .055);
  --row-tint: rgba(234, 235, 237, .03);
  --lamp-lift: 0 2px 7px rgba(0, 0, 0, .55);
  --pulse-glow: 0 3px 10px rgba(103, 216, 156, .4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

html { background: var(--paper); color: var(--ink); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  font-family: var(--display);
  background:
    linear-gradient(90deg, transparent 0 31px, var(--grid-rule) 32px, transparent 33px),
    var(--paper);
  background-size: 64px 100%;
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { color: var(--paper); background: var(--ink); }

/* A control printed on the command surface needs the opposite ring; the page's own
   focus green scores 2.57:1 against Command Ink and disappears into it. */
.copy-value button:focus-visible, .signal-field :focus-visible { outline-color: var(--focus-command); outline-offset: -3px; }

html { caret-color: var(--focus); scrollbar-width: thin; scrollbar-color: var(--line-dark) transparent; }