/* Infrastructure design system, derived from griffin.com (measured from its live computed styles).
   Proprietary fonts (Cambon, Söhne, Söhne Mono) are NOT bundled: system fallbacks fill the same roles. */
:root {
  /* Stone neutrals (warm) */
  --stone-45: #fdfcf9; --stone-100: #f9f5ef; --stone-200: #f1ece5; --stone-300: #e6e1d9;
  --stone-400: #d4cfc6; --stone-500: #c2bcb2; --stone-550: #aba69d; --stone-600: #959089;
  --stone-650: #7c7771; --stone-700: #625d58; --stone-800: #514e4b; --stone-900: #363533;
  --stone-1000: #1a1918; --stone-1100: #0c0c0b;

  /* Signals: colour only ever marks state or data */
  --green-text: #85eda5;  --green-500: #00c950;
  --teal-500: #00d7ca;
  --orange-500: #ff7a38;
  --red-500: #f85156;

  /* Semantic */
  --bg: var(--stone-1100);          /* page AND cards: surfaces are flat, structure comes from lines */
  --bg-hover: var(--stone-1000);
  --fg: var(--stone-100);           /* 16.5:1 on bg */
  --fg-muted: var(--stone-600);     /* 6.3:1 on bg: smallest allowed text colour */
  --line: var(--stone-900);         /* the one hairline: 1px #363533 */
  --positive: var(--green-text); --info: var(--teal-500);
  --warning: var(--orange-500);  --negative: var(--red-500);

  /* Type: serif = headlines only, sans = prose, mono = labels, buttons, numerals */
  --serif: "Cambon", "Apple Garamond", Baskerville, "Times New Roman", serif;
  --sans: "Sohne", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: "Sohne Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-card: 12px; --r-pill: 9999px;
  --pad: 24px; --pad-lg: 40px;
  --focus: 3px solid var(--stone-650);
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--bg); }
body { background: var(--bg); color: var(--fg); font: 400 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
em { font-style: italic; }

/* Type roles */
.display { font: 300 72px/72px var(--serif); letter-spacing: -0.02em; }
.h2 { font: 300 40px/44px var(--serif); letter-spacing: -0.04em; }
.h3 { font: 300 24px/28px var(--serif); letter-spacing: -0.02em; }
.eyebrow { font: 400 12px/16px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--fg-muted); }
.eyebrow .n { margin-right: 10px; }              /* "01" numbering, as in griffin.com's section list */
.num { font: 400 36px/36px var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.data { font: 400 12px/16px var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--fg-muted); }
:focus-visible { outline: var(--focus); outline-offset: 2px; }

/* Buttons: mono caps pill, 32px */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid transparent; font: 400 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn-primary { background: var(--stone-300); color: var(--stone-1100); }
.btn-primary:hover { background: var(--stone-100); }
.btn-secondary { background: transparent; color: var(--fg); border-color: var(--line); }
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--stone-700); }
.btn-danger { background: transparent; color: var(--negative); border-color: color-mix(in srgb, var(--negative) 45%, transparent); }
.btn-danger:hover { background: color-mix(in srgb, var(--negative) 10%, transparent); }

/* Status: mono caps text + dot. No tinted pills. Always text, never colour alone. */
.status { display: inline-flex; align-items: center; gap: 8px; font: 400 12px/16px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--c, var(--fg-muted)); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.s-ok { --c: var(--positive); } .s-info { --c: var(--info); } .s-warn { --c: var(--warning); } .s-bad { --c: var(--negative); } .s-idle { --c: var(--fg-muted); }

/* Card: same fill as page, 1px line, 12px radius. Ruled cells: no radius, shared lines. */
.card { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--pad); }
.rule-t { border-top: 1px solid var(--line); } .rule-b { border-bottom: 1px solid var(--line); }

/* Dotted grid texture (used once per view, as on griffin.com's illustration panels) */
.dots { background-image: radial-gradient(color-mix(in srgb, var(--stone-100) 14%, transparent) 1px, transparent 1px); background-size: 20px 20px; }