/* Design tokens: DESIGN.md §10.3–10.5.
   This file is copied verbatim to public-site/static/assets/tokens.css.
   If you change one, change the other — the two sites deploy separately on purpose. */

:root {
  /* Dark is the default: robe black, dungeon stone, the Black Lake. */
  --bg: #0B110E;
  --raise: #16201B;
  --lake: #0F2A22;
  --line: #2A3832;
  --line-2: #222E29;
  --line-3: #3B4C44;
  --ink: #E6ECE8;
  --ink-2: #A9B5AF;
  --ink-3: #8A9891;
  --em: #3DBB82;
  --em-hover: #5BE0A6;
  --on-em: #06140D;
  --live: #5BE0A6;
  --silver: #C3CCC8;
  --torch: #D8A84E;   /* deadlines ONLY (and "degraded") */
  --ember: #EE7A61;
  --sel: #16241E;
  --well: #121A16;    /* lab-notes block */

  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Archivo', 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
  --radius: 2px;
  --gutter: 32px;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #EEF1EC;
  --raise: #F8FAF7;
  --lake: #DCE8E0;
  --line: #C3CDC6;
  --line-2: #D5DDD7;
  --line-3: #AEBBB3;
  --ink: #0E1A14;
  --ink-2: #33433B;
  --ink-3: #55645D;
  --em: #146B45;
  --em-hover: #0E4F33;
  --on-em: #F4FAF6;
  --live: #0F7A4E;
  --silver: #33433B;
  --torch: #8A5A0E;
  --ember: #B23A22;
  --sel: #E1EBE4;
  --well: #F3F6F2;

  color-scheme: light;
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
}
a { color: var(--em); }
a:hover { color: var(--em-hover); }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--em); outline-offset: 2px; }

.wrap { max-width: var(--max, 1280px); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.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; }

/* Type roles */
.serif { font-family: var(--serif); font-weight: 400; }
.mono { font-family: var(--mono); }
.label {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kicker { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--em); }
.meta { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.display em, h1 em, h2 em { color: var(--em); }
.wide { font-weight: 800; font-stretch: 120%; letter-spacing: -0.01em; }

/* Buttons: 2px corners, 44px targets, no pills. */
.btn, .btn-ghost, .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.btn { background: var(--em); color: var(--on-em); border: 1px solid var(--em); font-weight: 700; font-stretch: 112%; }
.btn:hover { background: var(--em-hover); border-color: var(--em-hover); color: var(--on-em); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); font-weight: 600; }
.btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--em); font-weight: 700; font-stretch: 112%; }
.btn-outline:hover { color: var(--ink); background: var(--sel); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Status diamonds: always paired with a text label. */
.dia {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--ink-3);
  transform: rotate(45deg);
}
.dia.up, .dia.live, .dia.ok { background: var(--live); }
.dia.degraded, .dia.torch { background: var(--torch); }
.dia.down, .dia.blocked, .dia.bad { background: var(--ember); }
.dia.idle, .dia.off { background: var(--ink-3); }
.dia.em { background: var(--em); }
.dia.unknown { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.state-up { color: var(--live); }
.state-degraded { color: var(--torch); }
.state-down { color: var(--ember); }
.state-idle, .state-unknown { color: var(--ink-3); }