/* ============================================================
   BRAIN Foundation — Colors & Type
   The canonical CSS foundation for every surface in the system.
   Import as:  <link rel="stylesheet" href="/colors_and_type.css">
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* ——— Primary palette ——— */
  --ink:         #12203a;    /* Ink Navy — deep, institutional */
  --ink-700:     #2a3856;    /* Ink 700 — secondary ink */
  --ink-soft:    #4a5877;    /* supporting body / captions */
  --paper:       #f5f1ea;    /* Paper — warm off-white, primary background */
  --paper-200:   #ebe5d9;    /* Paper 200 — surface tint */
  --paper-300:   #ded6c5;    /* Paper 300 — divider / card */
  --accent:      #b3703a;    /* Ember — the single warm accent */
  --accent-soft: #e0b280;    /* Ember Soft — accent-on-dark */
  --sage:        #6b7d63;    /* Sage — secondary, used sparingly */
  --sage-soft:   #a8b59f;

  /* ——— Semantic ——— */
  --fg-1:        var(--ink);
  --fg-2:        var(--ink-700);
  --fg-3:        var(--ink-soft);
  --fg-inverse:  var(--paper);

  --bg-1:        var(--paper);       /* page background */
  --bg-2:        var(--paper-200);   /* tinted surface */
  --bg-3:        var(--paper-300);
  --bg-inverse:  var(--ink);         /* dark surface */

  --rule:        rgba(18, 32, 58, 0.18);
  --rule-soft:   rgba(18, 32, 58, 0.08);
  --rule-inverse: rgba(245, 241, 234, 0.15);

  --positive:    #6b7d63;      /* sage */
  --negative:    #c24a3a;      /* reserved for don'ts / destructive */

  /* ——— Type families ——— */
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* ——— Spacing scale (4px base) ——— */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ——— Type scale ——— */
  --fs-cap:     12px;
  --fs-small:   13px;
  --fs-body:    17px;
  --fs-lede:    22px;
  --fs-h3:      28px;
  --fs-h2:      44px;
  --fs-h1:      80px;
  --fs-display: clamp(64px, 9.5vw, 132px);

  /* ——— Layout ——— */
  --container: 1160px;
  --radius:    2px;       /* corners are near-square; we're a paper-of-record */
  --radius-lg: 4px;

  /* ——— Elevation (used sparingly — this is an editorial brand) ——— */
  --shadow-1: 0 1px 0 rgba(18,32,58,0.06);
  --shadow-2: 0 6px 24px rgba(18,32,58,0.08);
  --shadow-3: 0 20px 60px rgba(0,0,0,0.18);
}

/* ============================================================
   Base type styles — semantic utility classes
   Use these class names OR replicate the declarations on raw tags.
   ============================================================ */

.t-display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--fg-1);
}
.t-display em { font-style: italic; font-weight: 300; }

.t-h1, h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--fg-1);
  margin: 0;
}

.t-h2, h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin: 0;
}
.t-h2 em, h2 em { font-style: italic; color: var(--fg-3); }

.t-h3, h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--fg-1);
  margin: 0;
}

.t-lede {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: 1.4;
  color: var(--fg-2);
  max-width: 680px;
}

.t-body, p {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 62ch;
  text-wrap: pretty;
}

.t-small {
  font-family: var(--sans);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-3);
}

/* The workhorse label style — used everywhere the guidelines set
   an eyebrow, section number, caption, or overline. */
.t-cap, .t-caption {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-cap);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Smaller caption used on chrome / footers. */
.t-cap-sm {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Mono body, for data and running code. */
code, .t-mono {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg-2);
}

/* Italic serif — a signature flourish used in headings, quotes,
   section titles. Never use for running body copy. */
.t-italic {
  font-family: var(--serif);
  font-style: italic;
  color: var(--fg-3);
}

/* ============================================================
   Reset-ish defaults — apply to document root when used as a
   page stylesheet (opt-in via <body class="brain">).
   ============================================================ */

.brain, .brain body {
  margin: 0;
  padding: 0;
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.brain a { color: inherit; }
.brain *, .brain *::before, .brain *::after { box-sizing: border-box; }

/* Dark-surface variant — flip semantic vars on any container. */
.brain-dark,
.on-ink {
  background: var(--bg-inverse);
  color: var(--fg-inverse);
  --fg-1: var(--paper);
  --fg-2: var(--paper-200);
  --fg-3: var(--accent-soft);
  --rule: var(--rule-inverse);
}