/* =========================================================
   H&I Advisory — Design Tokens
   Editorial-financial. Cream paper, navy ink, hunter green
   for growth, copper for indices. Mono captions.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap");

:root {
  /* ---------- COLOR : Base palette ---------- */
  --ink-navy:        #1A2E4C;   /* Primary brand / headlines / primary buttons */
  --ink-navy-2:      #102038;   /* Pressed / deep emphasis */
  --ink-navy-hover:  #1F3858;   /* +6% brighten on hover */
  --bone:            #F4EFE6;   /* Canonical background — never pure white */
  --bone-tint:       #ECE5D7;   /* Subtle fill / secondary surface */
  --paper:           #FBF8F1;   /* Lifted surface (modal, hero card backdrop) */
  --hairline-steel:  #C9CDD4;   /* Default border / divider */
  --steel:           #8A93A1;   /* Disabled text, captions on cream */
  --graphite:        #4A5462;   /* Body copy secondary */
  --ink:             #11161E;   /* Near-black, used VERY sparingly */

  /* ---------- COLOR : Accents (greens + teals) ---------- */
  --compound-green:  #2F5D3A;   /* Growth / exit / success / KPI delta+ */
  --compound-green-2:#23472C;   /* Pressed */
  --sage:            #6EA779;   /* Lighter green — on-navy growth accent */
  --spruce-teal:     #1F5C68;   /* Deep editorial teal — markers, indices, quote */
  --surf-teal:       #3F8C9C;   /* Brighter teal — highlights, KPI deltas */
  --foam-teal:       #C7E0E1;   /* Soft teal — chips, subtle fills on cream */
  --signal-red:      #8C2F2A;   /* Decline / negative delta (kept for charts) */

  /* Legacy alias — copper is being phased out as the editorial-marker color.
     Aliased to spruce-teal so old references keep working but render in the
     new palette. Migrate references to --spruce-teal directly when touching files. */
  --copper:          var(--spruce-teal);
  --copper-2:        var(--compound-green-2);

  /* ---------- COLOR : Semantic (light) ---------- */
  --bg:              var(--bone);
  --bg-lift:         var(--paper);
  --bg-inverse:      var(--ink-navy);

  --fg:              var(--ink-navy);    /* Primary text on cream */
  --fg-1:            var(--ink-navy);
  --fg-2:            var(--graphite);
  --fg-3:            var(--steel);
  --fg-inverse:      var(--bone);

  --border:          var(--hairline-steel);
  --border-strong:   var(--ink-navy);

  --link:            var(--ink-navy);
  --link-hover:      var(--ink-navy-hover);

  --accent:          var(--compound-green);
  --accent-2:        var(--spruce-teal);
  --accent-3:        var(--surf-teal);

  /* ---------- TYPE : Families ---------- */
  --font-serif:  "Newsreader", "Source Serif Pro", "Georgia", serif;
  --font-sans:   "Geist", -apple-system, "Helvetica Neue", system-ui, sans-serif;
  --font-mono:   "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* ---------- TYPE : Scale (modular, 1.25 minor third for display, 1.2 for UI) ---------- */
  --fs-eyebrow:   12px;   /* Mono uppercase */
  --fs-caption:   13px;
  --fs-body-sm:   14px;
  --fs-body:      16px;
  --fs-body-lg:   18px;
  --fs-lede:      22px;   /* Lead paragraph under hero */

  --fs-h6:        18px;
  --fs-h5:        22px;
  --fs-h4:        28px;
  --fs-h3:        36px;
  --fs-h2:        52px;
  --fs-h1:        72px;
  --fs-display:   104px;  /* Hero only */

  /* ---------- TYPE : Weights ---------- */
  --fw-thin:      200;
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ---------- TYPE : Line heights ---------- */
  --lh-display:   1.02;
  --lh-heading:   1.08;
  --lh-snug:      1.25;
  --lh-body:      1.55;
  --lh-loose:     1.7;

  /* ---------- TYPE : Tracking ---------- */
  --tr-tight:    -0.02em;
  --tr-snug:     -0.01em;
  --tr-normal:    0;
  --tr-wide:      0.04em;
  --tr-wider:     0.08em;     /* Eyebrows / mono labels */

  /* ---------- SPACING : 4px base ---------- */
  --s-0:    0;
  --s-1:    4px;
  --s-2:    8px;
  --s-3:    12px;
  --s-4:    16px;
  --s-5:    20px;
  --s-6:    24px;
  --s-8:    32px;
  --s-10:   40px;
  --s-12:   48px;
  --s-16:   64px;
  --s-20:   80px;
  --s-24:   96px;
  --s-32:   128px;
  --s-40:   160px;

  /* ---------- RADII ---------- */
  --r-sharp:   0;
  --r-soft:    4px;        /* Buttons, chips, tags */
  --r-card:   12px;        /* Image-bearing cards */
  --r-pill:  999px;
  --r-badge:  22%;         /* Brand mark rounded-square */

  /* ---------- BORDERS ---------- */
  --hairline:  1px solid var(--hairline-steel);
  --rule-ink:  1px solid var(--ink-navy);

  /* ---------- SHADOWS (minimal) ---------- */
  --shadow-paper: 0 1px 0 rgba(26,46,76,.08), 0 8px 24px -12px rgba(26,46,76,.12);
  --shadow-pop:   0 2px 0 rgba(26,46,76,.10), 0 18px 40px -18px rgba(26,46,76,.18);

  /* ---------- LAYOUT ---------- */
  --container-max: 1280px;
  --reading-max:    760px;
  --gutter:           24px;

  /* ---------- MOTION ---------- */
  --ease-editorial: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-standard:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-quick:      120ms;
  --dur-state:      240ms;
  --dur-entrance:   480ms;
  --dur-hero:       800ms;
}

/* =========================================================
   Semantic typographic primitives
   ========================================================= */

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  text-rendering: optimizeLegibility;
}

/* Display + headings — serif */
.display, .h0 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: clamp(56px, 7.5vw, var(--fs-display));
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: clamp(40px, 5vw, var(--fs-h1));
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: clamp(32px, 3.6vw, var(--fs-h2));
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h6, .h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h6);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.lede {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-style: italic;
  font-size: var(--fs-lede);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  max-width: var(--reading-max);
  text-wrap: pretty;
}

p { line-height: var(--lh-body); color: var(--fg-2); text-wrap: pretty; }
p.body-lg { font-size: var(--fs-body-lg); }
p.body-sm { font-size: var(--fs-body-sm); }

/* Mono / metadata */
.eyebrow, .mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-3);
}

.index {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-wide);
  color: var(--copper);
}

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

/* Links — underline-only treatment */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-state) var(--ease-editorial),
              color var(--dur-state) var(--ease-editorial);
}
a:hover { text-decoration-color: currentColor; color: var(--link-hover); }

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

/* Horizontal rule */
hr { border: 0; border-top: var(--hairline); margin: var(--s-12) 0; }

/* Utility — page container */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.reading   { max-width: var(--reading-max);   margin: 0 auto; }

/* =========================================================
   Dark / inverse (navy section)
   ========================================================= */
.on-navy, .inverse {
  --bg:            var(--ink-navy);
  --bg-lift:       #213456;
  --fg:            var(--bone);
  --fg-1:          var(--bone);
  --fg-2:          #C7CCD6;
  --fg-3:          #8A93A1;
  --border:        #2A3F5E;
  --border-strong: var(--bone);
  --link:          var(--bone);
  --link-hover:    #FFFFFF;
  --accent:        #6EA779;        /* Lighter green on navy */
  background: var(--bg);
  color: var(--fg);
}