/* The Hemingway Report — Design Tokens
   ---------------------------------------------------------------
   The single source of truth for color, type, spacing, radii and
   elevation across every Hemingway Report surface. Import this
   file once at the document root; all components consume CSS vars.
*/

/* ---- Webfonts (variable, self-hosted) ----------------------- */
@font-face {
  font-family: "Newsreader";
  src: url("fonts/Newsreader_opsz_wght_.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/Newsreader-Italic_opsz_wght_.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat_wght_.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Italic_wght_.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans_opsz_wght_.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Italic_opsz_wght_.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans_wdth_wght_.ttf") format("truetype-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Italic_wdth_wght_.ttf") format("truetype-variations");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("fonts/Merriweather_opsz_wdth_wght_.ttf") format("truetype-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("fonts/Merriweather-Italic_opsz_wdth_wght_.ttf") format("truetype-variations");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Color: signature ----------------------------------- */
  --thr-forest:        #558654;   /* signature accent — eyebrows, stripe, nav pill */
  --thr-forest-deep:   #2E5241;   /* deeper-green moments */
  --thr-primary:       var(--thr-forest-deep);

  /* ---- Color: mono ---------------------------------------- */
  --thr-black:         #000000;   /* hero, footer, signature dark surface */
  --thr-near-black:    #1A1B1F;   /* primary CTA bg */
  --thr-near-black-2:  #32343A;   /* CTA hover */
  --thr-near-black-3:  #43464D;   /* CTA active */
  --thr-charcoal:      #333333;   /* body text on light */
  --thr-slate:         #758696;   /* secondary text, fine print */
  --thr-light-gray:    #F0F0F0;   /* body text on dark */
  --thr-border:        #E2E2E2;   /* dividers, input borders */
  --thr-smoke:         #F5F5F5;   /* alternate section bg */
  --thr-white:         #FFFFFF;

  /* ---- Color: reserved ------------------------------------ */
  --thr-periwinkle:    #6A7FDB;   /* charts only */
  --thr-red:           #EA384C;   /* errors only */

  /* ---- Color: editorial accents (palette extension v2) --- */
  /* Three named printing-tradition accents. Each has a role.
     See palette-extension.md for the defended usage rules. */
  --thr-galley:        #F2C744;   /* acidic cover stamp · "this piece matters" */
  --thr-galley-ink:    #1A1B1F;   /* the ink that always pairs with galley */
  --thr-plate:         #DD2E6C;   /* editorial magenta · Pro / series mark */
  --thr-plate-deep:    #B41E55;   /* deeper plate for hover/active */
  --thr-foundry:       #C84A24;   /* terracotta · marginalia, drop-cap, warmth */
  --thr-foundry-tint:  #F7E8DF;   /* foundry tint · infobox background */
  --thr-galley-tint:   #FBF1CE;   /* galley tint · highlight / annotation */

  /* ---- Color: warm register (palette extension v3) -------- */
  /* Three paper-tradition tones for the warm/notebook register.
     See palette-extension-warm.md for defended rules. */
  --thr-quire:         #F5EFE0;   /* buttercream paper substrate */
  --thr-quire-deep:    #E8DCC4;   /* deeper cream for sub-sections */
  --thr-sloe:          #7A4358;   /* dried-plum berry · drop-caps, stickers */
  --thr-sloe-deep:     #5C2F40;   /* deeper sloe for hover/active */
  --thr-sloe-tint:     #EFE0E5;   /* sloe wash · soft highlight */
  --thr-linnet:        #8C8270;   /* warm taupe · fine print on warm surfaces */
  --thr-bookcloth:     #2A2520;   /* warm near-black for warm-register dark surfaces */

  /* ---- Semantic color ------------------------------------- */
  --thr-bg:            var(--thr-white);
  --thr-bg-alt:        var(--thr-smoke);
  --thr-bg-dark:       var(--thr-black);
  --thr-fg:            var(--thr-charcoal);
  --thr-fg-strong:     var(--thr-near-black);
  --thr-fg-muted:      var(--thr-slate);
  --thr-fg-on-dark:    var(--thr-light-gray);
  --thr-accent:        var(--thr-forest);
  --thr-divider:       var(--thr-border);

  /* ---- Type families ------------------------------------- */
  --thr-font-display:    "Newsreader", "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --thr-font-subhead:    "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --thr-font-eyebrow:    "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --thr-font-body-web:   "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --thr-font-body-mail:  "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --thr-font-quote:      "Merriweather", Georgia, serif;
  --thr-font-fine:       "Newsreader", Georgia, serif;

  /* ---- Type sizes / line heights ------------------------- */
  --thr-fs-display-xl: 72px;  --thr-lh-display-xl: 1.05;
  --thr-fs-display-l:  56px;  --thr-lh-display-l:  1.08;
  --thr-fs-display-m:  40px;  --thr-lh-display-m:  1.12;
  --thr-fs-display-s:  32px;  --thr-lh-display-s:  1.18;
  --thr-fs-subhead-l:  24px;  --thr-lh-subhead-l:  1.25;
  --thr-fs-subhead-m:  20px;  --thr-lh-subhead-m:  1.3;
  --thr-fs-subhead-s:  16px;  --thr-lh-subhead-s:  1.35;
  --thr-fs-eyebrow:    12px;  --thr-lh-eyebrow:    1.2;
  --thr-ls-eyebrow:    2px;
  --thr-fs-body:       18px;  --thr-lh-body:       26px;
  --thr-fs-body-mail:  18px;  --thr-lh-body-mail:  28px;
  --thr-fs-body-s:     16px;  --thr-lh-body-s:     24px;
  --thr-fs-fine:       14px;  --thr-lh-fine:       1.5;
  --thr-fs-cta:        12px;  --thr-lh-cta:        1;
  --thr-ls-cta:        2px;

  /* ---- Spacing (4px base) -------------------------------- */
  --thr-sp-1:  4px;
  --thr-sp-2:  8px;
  --thr-sp-3:  12px;
  --thr-sp-4:  16px;
  --thr-sp-5:  20px;
  --thr-sp-6:  24px;
  --thr-sp-8:  32px;
  --thr-sp-12: 48px;
  --thr-sp-16: 64px;

  --thr-container-max:   1280px;
  --thr-reading-max:     720px;
  --thr-page-pad-desk:   32px;
  --thr-page-pad-mob:    20px;
  --thr-section-y-desk:  64px;
  --thr-section-y-mob:   48px;

  /* ---- Radii --------------------------------------------- */
  --thr-r-card:    14px;
  --thr-r-section: 16px;
  --thr-r-pill:    20px;
  --thr-r-cta:     3px;
  --thr-r-input:   8px;
  --thr-r-circle:  50%;

  /* ---- Elevation ----------------------------------------- */
  --thr-shadow-card:       0 4px 24px rgba(150, 163, 181, 0.08);
  --thr-shadow-card-hover: 0 8px 32px rgba(150, 163, 181, 0.12);

  /* ---- Signature device ---------------------------------- */
  --thr-stripe:         3px solid var(--thr-forest);
  --thr-stripe-width:   3px;

  /* ---- Motion -------------------------------------------- */
  --thr-ease:     cubic-bezier(0.2, 0, 0, 1);
  --thr-dur:      150ms;
}

/* ---- Reset-ish (only what tokens depend on) ----------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--thr-bg);
  color: var(--thr-fg);
  font-family: var(--thr-font-body-web);
  font-size: var(--thr-fs-body);
  line-height: var(--thr-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

/* ---- Semantic type classes ---------------------------------- */
.thr-display-xl,
.thr-display-l,
.thr-display-m,
.thr-display-s {
  font-family: var(--thr-font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--thr-fg-strong);
  margin: 0;
}
.thr-display-xl { font-size: var(--thr-fs-display-xl); line-height: var(--thr-lh-display-xl); }
.thr-display-l  { font-size: var(--thr-fs-display-l);  line-height: var(--thr-lh-display-l); }
.thr-display-m  { font-size: var(--thr-fs-display-m);  line-height: var(--thr-lh-display-m); }
.thr-display-s  { font-size: var(--thr-fs-display-s);  line-height: var(--thr-lh-display-s); }

.thr-subhead-l,
.thr-subhead-m,
.thr-subhead-s {
  font-family: var(--thr-font-subhead);
  font-weight: 700;
  color: var(--thr-fg-strong);
  margin: 0;
}
.thr-subhead-l { font-size: var(--thr-fs-subhead-l); line-height: var(--thr-lh-subhead-l); }
.thr-subhead-m { font-size: var(--thr-fs-subhead-m); line-height: var(--thr-lh-subhead-m); }
.thr-subhead-s { font-size: var(--thr-fs-subhead-s); line-height: var(--thr-lh-subhead-s); }

.thr-eyebrow {
  font-family: var(--thr-font-eyebrow);
  font-weight: 700;
  font-size: var(--thr-fs-eyebrow);
  line-height: var(--thr-lh-eyebrow);
  letter-spacing: var(--thr-ls-eyebrow);
  text-transform: uppercase;
  color: var(--thr-accent);
  margin: 0;
}

.thr-body  { font-family: var(--thr-font-body-web); font-size: var(--thr-fs-body); line-height: calc(var(--thr-lh-body) / var(--thr-fs-body)); }
.thr-body-mail { font-family: var(--thr-font-body-mail); font-size: var(--thr-fs-body-mail); line-height: calc(var(--thr-lh-body-mail) / var(--thr-fs-body-mail)); }
.thr-body-s { font-family: var(--thr-font-body-web); font-size: var(--thr-fs-body-s); line-height: calc(var(--thr-lh-body-s) / var(--thr-fs-body-s)); }

.thr-quote {
  font-family: var(--thr-font-quote);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.45;
  color: var(--thr-fg-strong);
}

.thr-fine {
  font-family: var(--thr-font-fine);
  font-weight: 500;
  font-size: var(--thr-fs-fine);
  line-height: var(--thr-lh-fine);
  color: var(--thr-fg-muted);
}

/* ---- Signature dark surface --------------------------------- */
.thr-dark-surface {
  background: var(--thr-black);
  color: var(--thr-fg-on-dark);
  border-top: var(--thr-stripe);
}

/* ---- Buttons ----------------------------------------------- */
.thr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--thr-sp-2);
  font-family: var(--thr-font-body-web);
  font-weight: 600;
  font-size: var(--thr-fs-cta);
  line-height: var(--thr-lh-cta);
  letter-spacing: var(--thr-ls-cta);
  text-transform: uppercase;
  padding: 12px 25px;
  border-radius: var(--thr-r-cta);
  background: var(--thr-near-black);
  color: var(--thr-white);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--thr-dur) var(--thr-ease);
}
.thr-btn:hover  { background: var(--thr-near-black-2); }
.thr-btn:active { background: var(--thr-near-black-3); }

.thr-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--thr-sp-2);
  font-family: var(--thr-font-body-web);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  padding: 10px 20px;
  border-radius: var(--thr-r-pill);
  background: var(--thr-forest);
  color: var(--thr-white);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--thr-dur) var(--thr-ease),
              color var(--thr-dur) var(--thr-ease),
              border-color var(--thr-dur) var(--thr-ease);
}
.thr-pill:hover {
  background: var(--thr-white);
  color: var(--thr-forest);
  border-color: var(--thr-forest);
}

/* ---- Card ---------------------------------------------------- */
.thr-card {
  background: var(--thr-white);
  border-radius: var(--thr-r-card);
  padding: 24px 28px;
  box-shadow: var(--thr-shadow-card);
  transition: box-shadow var(--thr-dur) var(--thr-ease);
}
.thr-card:hover { box-shadow: var(--thr-shadow-card-hover); }

/* ---- Input -------------------------------------------------- */
.thr-input {
  font-family: var(--thr-font-body-web);
  font-size: 16px;
  line-height: 1.4;
  padding: 12px 14px;
  border: 1px solid var(--thr-border);
  border-radius: var(--thr-r-input);
  background: var(--thr-white);
  color: var(--thr-fg-strong);
  outline: none;
  transition: border-color var(--thr-dur) var(--thr-ease),
              box-shadow var(--thr-dur) var(--thr-ease);
}
.thr-input::placeholder { color: var(--thr-slate); }
.thr-input:focus {
  border-color: var(--thr-forest);
  box-shadow: 0 0 0 2px var(--thr-white), 0 0 0 4px var(--thr-forest);
}

/* ---- Divider ----------------------------------------------- */
.thr-divider { border: 0; border-top: 1px solid var(--thr-border); margin: 0; }
.thr-divider-dark { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 0; }