/* =============================================================
   StreamXLS — colors_and_type.css
   Engineering broadsheet register. Sober, document-oriented.
   Newsreader (display serif) + IBM Plex Sans + IBM Plex Mono.
   ============================================================= */

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

:root {
  /* ---- PALETTE — paper & ink ---- */
  --paper:        #F7F4EC;   /* warm off-white, page background */
  --paper-2:      #F1ECE0;   /* slight tint, panels/wells */
  --paper-3:      #E8E1D0;   /* deeper tint, hover/selected */
  --ink:          #171410;   /* warm near-black, primary text */
  --ink-2:        #3D362E;   /* secondary text, captions */
  --ink-3:        #6B6258;   /* tertiary text, metadata */
  --ink-4:        #8F867B;   /* placeholder, disabled */
  --rule:         #1714101A; /* 10% ink — hairline divider */
  --rule-strong:  #17141033; /* 20% ink — emphasized divider */

  /* ---- SEMANTIC COLOR ---- */
  --ticker-green: #00713A;   /* live / positive / connected */
  --ticker-green-tint: #00713A14;   /* 8% — chip background */
  --signal-amber: #A05A0A;   /* cautionary / highlight — 5.78:1 contrast on paper */
  --signal-amber-tint: #A05A0A14;
  --loss-red:     #A4231F;   /* negative P&L only — never as accent */
  --loss-red-tint:#A4231F14;

  /* ---- INVERSE (dark-on-paper or hero band) ---- */
  --ink-bg:       #171410;
  --ink-bg-2:     #221D17;
  --paper-on-ink: #F7F4EC;
  --ink-3-on-ink: #B6ADA0;

  /* ---- TYPE — families ---- */
  --font-serif:   'Newsreader', 'Times New Roman', Georgia, serif;
  --font-sans:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SF Mono', 'Consolas', 'Courier New', monospace;

  /* ---- TYPE — scale (broadsheet, generous) ---- */
  --fs-display:   72px;  /* hero H1 */
  --fs-h1:        56px;
  --fs-h2:        40px;
  --fs-h3:        28px;
  --fs-h4:        21px;
  --fs-lede:      22px;  /* sub-head body */
  --fs-body:      17px;  /* body */
  --fs-body-sm:   15px;
  --fs-mono:      14px;  /* code / numbers */
  --fs-meta:      13px;  /* captions, footnotes, eyebrows */
  --fs-micro:     11px;  /* uppercase labels */

  /* ---- TYPE — leading + tracking ---- */
  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-body:      1.55;
  --lh-loose:     1.7;
  --tr-display:   -0.02em;
  --tr-body:      0;
  --tr-label:     0.08em;  /* eyebrow caps */

  /* ---- SPACING — broadsheet grid ---- */
  --grid-max:     1200px;
  --grid-cols:    12;
  --grid-gutter:  24px;
  --section-gap:  96px;   /* between major sections */
  --block-gap:    48px;   /* between blocks within a section */

  /* generic scale (multiples of 4 / 8) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---- BORDERS — hairlines only ---- */
  --border-w:     1px;
  --border:       var(--border-w) solid var(--rule);
  --border-strong:var(--border-w) solid var(--rule-strong);
  --border-ink:   var(--border-w) solid var(--ink);

  /* ---- RADII — minimal. broadsheet is square. ---- */
  --radius-0:     0;        /* default — boxes, panels, buttons */
  --radius-sm:    2px;      /* chips, badges */
  --radius-md:    4px;      /* rare — modals only */

  /* ---- SHADOWS — none in normal flow.
     Reserved exclusively for floating overlays (menus, tooltips). ---- */
  --shadow-overlay: 0 1px 2px rgba(23, 20, 16, 0.06),
                    0 8px 24px rgba(23, 20, 16, 0.08);

  /* ---- MOTION — minimal, fast, no bounces ---- */
  --ease-std:     cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:     120ms;
  --dur-base:     180ms;
  --dur-slow:     280ms;
}

/* =============================================================
   SEMANTIC ELEMENTS
   ============================================================= */

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display + headlines — Newsreader serif */
h1, .h1, .display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--ink);
  margin: 0;
}
.display {
  font-size: var(--fs-display);
}
h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-display);
  color: var(--ink);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0;
}

/* Lede — sub-head body, larger than body */
.lede {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink-2);
}

/* Eyebrow — uppercase mono label above a section header */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-micro);
  line-height: 1;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Body text */
p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.body-sm { font-size: var(--fs-body-sm); line-height: 1.55; }
.meta {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--ink-3);
}

/* Code, tickers, numbers — IBM Plex Mono */
code, .mono, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  color: var(--ink);
}
pre {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  line-height: 1.6;
  background: var(--paper-2);
  border: var(--border);
  padding: var(--space-5);
  margin: 0;
  overflow-x: auto;
  color: var(--ink);
}
/* Inline ticker — small, monospaced, color-keyed */
.ticker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}
.ticker--up    { color: var(--ticker-green); }
.ticker--down  { color: var(--loss-red); }
.ticker--flat  { color: var(--ink-2); }

/* Links — broadsheet underline, no color shift on the link itself */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-std);
}
a:hover {
  text-decoration-color: var(--ink);
}

/* Selection */
::selection {
  background: var(--ink);
  color: var(--paper);
}

/* Hairline rules */
hr {
  border: 0;
  border-top: var(--border);
  margin: var(--block-gap) 0;
}