/* glickman brand — v1.0 · danielglickman.com */
/* Import IBM Plex superfamily before using:
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet"> */

:root {
  /* ---- COLOR ---- */
  --ink:        #0D1B2A;  /* Midnight Ledger — primary dark surface + ink */
  --panel:      #122538;  /* Console Panel — raised dark surface */
  --steel:      #4E7DA6;  /* Steel Blue — links, eyebrows, rules */
  --haze:       #A9BFD3;  /* Slipstream — muted text on dark, captions */
  --paper:      #F4F7FA;  /* Cold Press — light surface (cool, never cream) */
  --paper-edge: #DDE5EC;  /* hairlines on light */
  --signal:     #E0A458;  /* Amber Signal — the one accent */
  --signal-dim: #8A6A3F;

  /* ---- TYPE ---- */
  --serif: "IBM Plex Serif", Georgia, serif;   /* display, headlines, big numbers */
  --sans:  "IBM Plex Sans", -apple-system, sans-serif; /* body */
  --mono:  "IBM Plex Mono", ui-monospace, monospace;   /* telemetry, labels, dates */

  /* ---- SYSTEM ---- */
  --radius: 4px;        /* technical, never pillowy */
  --max: 1080px;        /* content max width */
  --max-line: 64ch;     /* body measure */
}

/* Color-ratio target per screen: ~60% paper, ~25% ink, ~10% steel, ~5% signal.
   Amber marks live data, status, and outcomes only. */

/* Status vocabulary is FIXED — do not invent new ones:
   [CURRENT]  [SHIPPED]  [LIVE]  [IN PROD] */

/* Minimal base (optional starting point) */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--steel); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

h1, h2, h3.display { font-family: var(--serif); }
.eyebrow, .label, .telemetry, .mono { font-family: var(--mono); }

/* Respect reduced motion on the telemetry boot animation and cursor */
@media (prefers-reduced-motion: reduce) {
  .cline, .cursor { animation: none !important; opacity: 1; transform: none; }
}