/* ============================================================
   LUMEN — Foundation tokens
   Cool-only palette · sans + mono · sharp corners · hairlines
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- COLOR ---------------------------------------- */

  /* Surfaces (near-white, cool tint — never #fff) */
  --bg:           #F8F9FB;   /* primary surface */
  --bg-2:         #F4F5F7;   /* secondary surface, subtle step */
  --bg-3:         #ECEEF2;   /* tertiary surface (table stripes, hovers) */

  /* Ink (deep cool with blue undertone — never pure black) */
  --ink:          #0A0A0F;   /* primary text, primary borders */
  --ink-2:        #1B1F2A;   /* secondary headings */
  --ink-3:        #3A4252;   /* body copy on bg-2 */

  /* Cool-tinted grays — supporting text + dividers */
  --mute-1:       #5B6473;   /* secondary text, captions */
  --mute-2:       #8A93A6;   /* tertiary text, eyebrow muted */
  --mute-3:       #B9C0CC;   /* disabled, placeholder */

  /* Hairlines — ink at 10–15% opacity */
  --hair:         rgba(10, 10, 15, 0.12);
  --hair-strong:  rgba(10, 10, 15, 0.18);
  --hair-soft:    rgba(10, 10, 15, 0.06);

  /* Accent — electric cobalt. Reserved: loop arrow, focal node, key callout. */
  --accent:       #1E4DFF;
  --accent-ink:   #0E2BB8;   /* hover / pressed accent text */
  --accent-tint:  rgba(30, 77, 255, 0.06);   /* focal-node fill, 4–8% */
  --accent-line:  rgba(30, 77, 255, 0.18);   /* accent hairlines */

  /* Semantic (kept cool — no warm reds/oranges) */
  --positive:     #1F8A5B;   /* deep teal-leaning green, used sparingly */
  --warning:      #3F5BD9;   /* re-routes warning to indigo, not amber */
  --critical:     #B23A6B;   /* cool magenta — last resort only */

  /* ---------- TYPE ---------------------------------------- */

  --sans:  "Geist", "Söhne", "ABC Diatype", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono:  "Geist Mono", "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — minimums tuned for back-of-room legibility */
  --t-eyebrow:    12px;   /* mono, uppercase, +0.08em */
  --t-caption:    14px;
  --t-body-sm:    18px;
  --t-body:       20px;
  --t-body-lg:    24px;   /* minimum body for slides */
  --t-sub:        32px;
  --t-h3:         40px;
  --t-h2:         56px;   /* minimum headline for slides */
  --t-h1:         80px;
  --t-display:    120px;  /* big-number treatment */

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-body:      1.55;
  --lh-loose:     1.7;

  --tr-eyebrow:   0.08em;
  --tr-tight:     -0.02em;
  --tr-tighter:   -0.03em;

  /* ---------- SHAPE ---------------------------------------- */

  --radius-0:     0px;
  --radius-1:     2px;       /* maximum */
  --border:       1px solid var(--hair);
  --border-strong:1px solid var(--hair-strong);
  --border-ink:   1px solid var(--ink);
  --border-accent:1px solid var(--accent);

  /* ---------- SPACING (8px grid) -------------------------- */

  --s-1:   8px;
  --s-2:   16px;
  --s-3:   24px;
  --s-4:   32px;
  --s-5:   48px;
  --s-6:   64px;
  --s-7:   96px;
  --s-8:   128px;
}

/* ============================================================
   Semantic primitives
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--mute-1);
  line-height: 1;
}
.eyebrow--accent { color: var(--accent); }
.eyebrow--ink    { color: var(--ink); }

.h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tighter);
  color: var(--ink);
}
.h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}
.h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}
.sub {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-sub);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--ink-2);
}
.body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-3);
}
.body--lg { font-size: var(--t-body-lg); }
.body--sm { font-size: var(--t-body-sm); }
.caption {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-caption);
  line-height: var(--lh-body);
  color: var(--mute-1);
}
.mono {
  font-family: var(--mono);
  font-size: var(--t-body-sm);
  font-weight: 400;
  color: var(--ink-2);
}

/* big-number treatment */
.bignum {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bignum--accent { color: var(--accent); }

/* callout box */
.callout {
  border: var(--border);
  padding: var(--s-4) var(--s-4);
  background: transparent;
  border-radius: 0;
}

/* pulled-out quote */
.quote {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-sub);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  padding: var(--s-4) 0;
  border-top: var(--border);
  border-bottom: var(--border);
}
.quote--rule {
  border: 0;
  padding: 0 0 0 var(--s-3);
  border-left: 2px solid var(--accent);
}

/* table — hairline rules between rows only, no fills */
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
}
.table th,
.table td {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--border);
  font-size: var(--t-body-sm);
  font-weight: 400;
  color: var(--ink-3);
  vertical-align: top;
}
.table th {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--mute-1);
  font-weight: 500;
  padding-bottom: var(--s-2);
}

/* status dashboard tile */
.tile {
  padding: var(--s-3) 0;
  border-bottom: var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.tile__label  { /* use .eyebrow */ }
.tile__value  { font-family: var(--sans); font-weight: 600; font-size: var(--t-h3); color: var(--ink); letter-spacing: var(--tr-tight); }
.tile__caption{ font-family: var(--sans); font-size: var(--t-caption); color: var(--mute-1); }

/* diagram primitives */
.node {
  border: var(--border-strong);
  padding: var(--s-2) var(--s-3);
  background: transparent;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-body-sm);
  color: var(--ink);
  border-radius: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
.node--focal {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.node--focal .eyebrow { color: var(--accent); }

/* buttons — borders not fills */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-body-sm);
  letter-spacing: -0.005em;
  border-radius: 0;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn:active { background: var(--ink-2); }

.btn--accent { border-color: var(--accent); color: var(--accent); }
.btn--accent:hover { background: var(--accent); color: var(--bg); }

.btn--ghost { border-color: var(--hair); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); }

/* form field */
.field {
  width: 100%;
  height: 44px;
  padding: 0 var(--s-2);
  border: var(--border);
  background: transparent;
  font-family: var(--sans);
  font-size: var(--t-body-sm);
  color: var(--ink);
  border-radius: 0;
  outline: none;
}
.field:focus { border-color: var(--ink); }
.field::placeholder { color: var(--mute-3); }

/* divider */
.rule { height: 1px; background: var(--hair); border: 0; width: 100%; }
.rule--strong { background: var(--hair-strong); }