/* =======================================================================
   Current Research Labs — Foundations
   Colors & Type. Import this once, use the vars everywhere.
   ======================================================================= */

/* -----------------------------------------------------------------------
   Fonts — Google Fonts substitutions (FLAGGED: no licensed brand fonts
   were provided; these are the closest free matches and should be
   swapped for the real cuts once the user supplies them).

   - EB Garamond  → display + body serif (Bembo / Vonnegut-adjacent)
   - JetBrains Mono → labels, code, eyebrows, small-caps
   ----------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ===== Color — primitive tokens =====
     Pulled from the Wall Street canyon photograph. Warm sandstone tones
     anchor the system; one cool "current" hue is the sole cool accent. */

  --ink:            #1A1614;   /* canyon shadow — primary text */
  --ink-2:          #3B332C;   /* secondary text */
  --ink-3:          #6B5F53;   /* tertiary / metadata */
  --ink-4:          #9E8F7E;   /* disabled / hairline */

  --paper:          #F4EFE6;   /* warm cream — primary surface */
  --paper-2:        #ECE5D6;   /* secondary surface, alt rows */
  --paper-3:        #E0D6C2;   /* tertiary surface, wells */
  --paper-edge:     #CFC2A8;   /* dividers on paper */

  --sandstone:      #B8895A;   /* mid canyon wall */
  --sandstone-lt:   #D9B68A;   /* sunlit ledge */
  --sandstone-dp:   #6A4423;   /* wet sandstone, deep shadow */

  --ember:          #C95F2C;   /* accent — used for links + the mark */
  --ember-dp:       #8E3A14;   /* hover/pressed ember */

  --current:        #2D5F7A;   /* probability current — the one cool */
  --current-lt:     #7BA3B5;
  --current-dp:     #173546;

  --simplex-fill:   #1A1614;   /* hand-drawn simplex is always ink */

  /* ===== Color — semantic =====
     Always reach for these in component CSS, not the primitives above. */

  --fg-1:           var(--ink);
  --fg-2:           var(--ink-2);
  --fg-3:           var(--ink-3);
  --fg-mute:        var(--ink-4);
  --fg-on-dark:     var(--paper);

  --bg-1:           var(--paper);
  --bg-2:           var(--paper-2);
  --bg-3:           var(--paper-3);
  --bg-inverse:     var(--ink);

  --accent:         var(--ember);
  --accent-hover:   var(--ember-dp);
  --link:           var(--ember-dp);
  --link-visited:   var(--sandstone-dp);

  --rule:           var(--paper-edge);
  --rule-strong:    var(--ink-4);

  --focus-ring:     var(--current);

  /* Status — kept muted, palette-consistent. No bright traffic-light hues. */
  --status-ok:      #4A6B3E;
  --status-warn:    #B58A2B;
  --status-err:     var(--ember-dp);

  /* ===== Type — primitives ===== */
  --font-serif:     'EB Garamond', 'Source Serif 4', Bembo, Garamond, 'Times New Roman', serif;
  --font-display:   'DM Serif Display', 'Bodoni Moda', Didot, 'EB Garamond', serif;
  --font-mono:      'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --fs-100: 12px;   /* footnote / caption */
  --fs-200: 14px;   /* small body, labels */
  --fs-300: 16px;   /* base UI */
  --fs-400: 19px;   /* body */
  --fs-500: 24px;   /* lede / large body */
  --fs-600: 32px;   /* h3 */
  --fs-700: 44px;   /* h2 */
  --fs-800: 64px;   /* h1 */
  --fs-900: 96px;   /* hero display */

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

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.16em;   /* mono small-caps eyebrow */
  --tracking-label:   0.04em;

  /* ===== Type — semantic ===== */
  --type-hero-display: 400 var(--fs-900)/var(--lh-tight) var(--font-serif);
  --type-h1:           400 var(--fs-800)/var(--lh-tight) var(--font-serif);
  --type-h2:           400 var(--fs-700)/var(--lh-snug)  var(--font-serif);
  --type-h3:           500 var(--fs-600)/var(--lh-snug)  var(--font-serif);
  --type-h4:           600 var(--fs-500)/var(--lh-snug)  var(--font-serif);

  --type-lede:         400 var(--fs-500)/var(--lh-body)  var(--font-serif);
  --type-body:         400 var(--fs-400)/var(--lh-prose) var(--font-serif);
  --type-body-sm:      400 var(--fs-300)/var(--lh-body)  var(--font-serif);
  --type-caption:      400 var(--fs-200)/var(--lh-body)  var(--font-serif);
  --type-footnote:     400 var(--fs-100)/var(--lh-body)  var(--font-serif);

  --type-eyebrow:      500 var(--fs-100)/1   var(--font-mono);  /* used with text-transform: uppercase + tracking-eyebrow */
  --type-label:        500 var(--fs-200)/1.1 var(--font-mono);
  --type-mono:         400 var(--fs-300)/1.5 var(--font-mono);
  --type-ui:           500 var(--fs-300)/1.1 var(--font-mono);

  /* ===== Spacing — half-step scale, named in book typography units ===== */
  --space-hairline: 1px;
  --space-1:  4px;    /* hairline gap */
  --space-2:  8px;    /* tight */
  --space-3:  12px;
  --space-4:  16px;   /* baseline */
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  /* Reading-column widths */
  --measure-narrow: 38ch;    /* footnotes, marginalia */
  --measure-prose:  62ch;    /* body */
  --measure-wide:   78ch;    /* lede, intros */

  /* ===== Radii — restrained ===== */
  --radius-0: 0px;       /* default — paper is square */
  --radius-1: 2px;       /* tags, chips */
  --radius-2: 4px;       /* buttons, inputs */
  --radius-3: 8px;       /* cards (rarely) */
  --radius-pill: 999px;  /* status pills only */

  /* ===== Borders ===== */
  --hairline:   1px solid var(--rule);
  --rule-bold:  2px solid var(--ink);
  --rule-dashed: 1px dashed var(--rule-strong);

  /* ===== Shadows — paper, not glass. Subtle. ===== */
  --shadow-paper:  0 1px 0 var(--paper-edge);
  --shadow-lift:   0 1px 0 var(--paper-edge), 0 8px 20px -12px rgba(26, 22, 20, 0.18);
  --shadow-card:   0 1px 0 var(--paper-edge), 0 16px 32px -20px rgba(26, 22, 20, 0.25);
  --shadow-modal:  0 24px 60px -24px rgba(26, 22, 20, 0.45);
  --shadow-inset:  inset 0 1px 0 rgba(26, 22, 20, 0.04);

  /* ===== Motion ===== */
  --ease-paper:   cubic-bezier(0.2, 0.0, 0, 1);   /* default — feels like turning a page */
  --ease-current: cubic-bezier(0.4, 0.0, 0.2, 1); /* slow flow */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 600ms;   /* page-turn class transitions */

  /* ===== Grain & paper texture overlay (apply as filter or background) ===== */
  --grain-opacity: 0.04;
}

/* =======================================================================
   Element defaults — drop colors_and_type.css and these baselines apply.
   ======================================================================= */

html {
  font-family: var(--font-serif);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; font: var(--type-body); }

h1 { font: var(--type-h1); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-5); }
h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); }
h3 { font: var(--type-h3); margin: 0 0 var(--space-3); }
h4 { font: var(--type-h4); margin: 0 0 var(--space-3); }

p  { font: var(--type-body); margin: 0 0 var(--space-4); max-width: var(--measure-prose); text-wrap: pretty; }

small, .caption { font: var(--type-caption); color: var(--fg-2); }

code, pre, kbd, samp { font-family: var(--font-mono); }
code { font-size: 0.92em; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-1) var(--ease-paper);
}
a:hover { color: var(--ember); }
a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

hr {
  border: 0;
  border-top: var(--hairline);
  margin: var(--space-6) 0;
}

::selection { background: var(--sandstone-lt); color: var(--ink); }

/* Mono eyebrow utility — used everywhere */
.eyebrow {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-3);
  display: inline-block;
}

/* The marginalia bullet — Vonnegut's diamond-arrow ◆ */
.marginalia {
  position: relative;
  padding-left: 1.4em;
}
.marginalia::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0.15em;
  font-size: 0.85em;
  color: var(--ink);
}