/* =====================================================================
   HOT 'STACKS — DESIGN TOKENS (v6)
   =====================================================================
   Single source of truth for color + type, extracted from the v6
   production package (buttondown-v6-lite/custom.css + Issue 35).

   USAGE
     <link rel="stylesheet" href="colors_and_type.css">
     ...then use the --vars, or the semantic helper classes at the
     bottom (.hs-display, .hs-eyebrow, .hs-body, .hs-slug, etc).

   THE ONE RULE
     Color does structural work, never decoration. Magenta is the
     brand/scoop; orange is the ecosystem sibling; teal is "look here
     for the receipt"; yellow is "on the record." Source-coding
     colors (solo/mid/pub) are a SEPARATE axis — they type the
     journalist, not the page role. Never mix the two systems.
   ===================================================================== */

:root {

  /* ---- SUBSTRATE (warm, paper-like; light by default) ---------- */
  --paper:        #F5F2ED;   /* primary substrate — the email card  */
  --paper-card:   #FBF9F4;   /* inset panels: stacks-box, stat-tally */
  --paper-page:   #E8E4DC;   /* page behind the card (mockups only) */
  --bar-fill:     #EBE6DA;   /* section-bar background              */

  /* ---- INK & TEXT ---------------------------------------------- */
  --ink:          #111111;   /* headlines, structural black, CTA bg */
  --ink-deep:     #0A0A0A;   /* deepest bars                        */
  --body:         #2A2A28;   /* body copy                           */
  --muted:        #76746E;   /* secondary text, eyebrows, captions  */

  /* ---- RULES & HAIRLINES --------------------------------------- */
  --rule:         #D8D4CC;   /* standard divider                    */
  --rule-box:     #1F1F1D;   /* stacks-box border                   */
  --sep:          #C9C5BC;   /* the · separators in the stacks list */
  --cta-rule:     #2C2C2A;   /* dividers inside the dark CTA footer  */
  --cta-body:     #B9B4A9;   /* body text inside the dark CTA footer */

  /* ---- STRUCTURAL LINE SYSTEM (WMATA logic) -------------------- */
  /* These map the ROLE a color is playing on the page.            */
  --magenta:      #FF2D78;   /* the scoop / PRIMARY BRAND ACCENT    */
  --orange:       #FF6719;   /* ecosystem / sibling (Substack nod)  */
  --teal:         #00D6C8;   /* reference / footnote — link underline */
  --yellow:       #FFE500;   /* on the record — the highlighter     */

  /* magenta tints — tint backgrounds for picks, lists, callouts   */
  --magenta-05:   rgba(255,45,120,0.05);
  --magenta-07:   rgba(255,45,120,0.07);
  --magenta-10:   rgba(255,45,120,0.10);
  --yellow-hl:    rgba(255,229,0,0.65);  /* the .hl highlighter ink */

  /* ---- SOURCE-CODING (a SEPARATE axis — who did the journalism) */
  --src-solo:     #C84300;   /* single-author Substacks / solo      */
  --src-mid:      #008276;   /* independent newsletter-first outlets */
  --src-pub:      #111111;   /* magazines & legacy publications     */

  /* ---- TYPE FAMILIES ------------------------------------------- */
  --display:  'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --serif:    'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:     'JetBrains Mono', Menlo, Consolas, monospace;

  /* ---- TYPE SCALE (the production values, named) --------------- */
  --fs-masthead:      clamp(44px, 10vw, 64px); /* h1 wordmark        */
  --fs-feature:       30px;                     /* .first-feature h3 */
  --fs-headline:      26px;                     /* item h3           */
  --fs-pullquote:     30px;                     /* blockquote        */
  --fs-body:          16.5px;                   /* p, li             */
  --fs-link-row:      15.5px;                   /* link-row anchor   */
  --fs-link-body:     14.5px;                   /* link-row summary  */
  --fs-section-bar:   13px;                     /* h2 topic label    */
  --fs-eyebrow:       10.5px;                   /* mono caps eyebrow */
  --fs-beat:          10px;                      /* h4 "more on beat" */
  --fs-slug:          9.5px;                     /* source slug pill  */

  --lh-tight:   1.05;   /* display */
  --lh-snug:    1.14;   /* headlines */
  --lh-body:    1.62;   /* prose */

  --ls-display: -0.005em;
  --ls-caps:    0.18em;  /* mono caps default tracking */
  --ls-bar:     0.14em;  /* section-bar tracking */
}

/* =====================================================================
   SEMANTIC HELPER CLASSES
   Optional shortcuts that bake the production specs into named classes.
   Use them when building new surfaces (homepage, decks, etc) so type
   stays consistent with the newsletter.
   ===================================================================== */

.hs-display {           /* masthead wordmark / big condensed display */
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-masthead);
  line-height: 0.92;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--ink);
}

.hs-eyebrow {           /* mono caps eyebrow / kicker — magenta */
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--magenta);
}

.hs-section-bar {       /* topic label bar */
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-section-bar);
  line-height: 1.1;
  letter-spacing: var(--ls-bar);
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bar-fill);
  padding: 9px 14px;
  border-left: 5px solid var(--magenta);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.hs-section-bar.is-ecosystem { border-left-color: var(--orange); }
.hs-section-bar.is-reference { border-left-color: var(--teal); }

.hs-headline {          /* serif item headline, sentence case */
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-headline);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.hs-body {              /* prose */
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--body);
}
.hs-body strong { color: var(--ink); font-weight: 700; }
.hs-body a {            /* inline citation — teal "receipt" underline */
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--teal);
  padding-bottom: 1px;
}

.hs-pullquote {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-pullquote);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--ink);
  border-left: 6px solid var(--magenta);
  padding-left: 22px;
  margin: 0;
}

.hs-slug {              /* source slug pill */
  display: inline-block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--fs-slug);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid currentColor;
  color: var(--src-solo);
  white-space: nowrap;
}
.hs-slug.solo { color: var(--src-solo); }
.hs-slug.mid  { color: var(--src-mid); }
.hs-slug.pub  { color: var(--src-pub); }

.hs-hl {                /* yellow "on the record" highlighter */
  background: linear-gradient(transparent 55%, var(--yellow-hl) 55%);
  padding: 0 3px;
}