/* =========================================================
   The Long Investor — Design Tokens
   Source: uploads/Brand.pdf + the-long-investor codebase
   =========================================================
   Brand mantra: Elegant (B&W), Modern (mono lines), Strict (yellow + serif)
*/

/* ---------- Webfont registration ---------------------------------- */
/* Acumin Pro — full weight set, normal + italic */
@font-face { font-family: "Acumin Pro"; src: url("fonts/AcuminPro-Thin.otf")            format("opentype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Acumin Pro"; src: url("fonts/AcuminPro-ThinItalic.otf")      format("opentype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Acumin Pro"; src: url("fonts/AcuminPro-ExtraLight.otf")      format("opentype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Acumin Pro"; src: url("fonts/AcuminPro-ExtraLightItalic.otf") format("opentype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Acumin Pro"; src: url("fonts/AcuminPro-Light.otf")           format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Acumin Pro"; src: url("fonts/AcuminPro-LightItalic.otf")     format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Acumin Pro"; src: url("fonts/AcuminPro-Regular.otf")         format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Acumin Pro"; src: url("fonts/AcuminPro-Italic.otf")          format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Acumin Pro"; src: url("fonts/AcuminPro-Medium.otf")          format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Acumin Pro"; src: url("fonts/AcuminPro-MediumItalic.otf")    format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Acumin Pro"; src: url("fonts/AcuminPro-Semibold.otf")        format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Acumin Pro"; src: url("fonts/AcuminPro-SemiboldItalic.otf")  format("opentype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Acumin Pro"; src: url("fonts/AcuminPro-Bold.otf")            format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Acumin Pro"; src: url("fonts/AcuminPro-BoldItalic.otf")      format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Acumin Pro"; src: url("fonts/AcuminPro-Black.otf")           format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Acumin Pro"; src: url("fonts/AcuminPro-BlackItalic.otf")     format("opentype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Acumin Pro"; src: url("fonts/AcuminPro-UltraBlack.otf")      format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Acumin Pro"; src: url("fonts/AcuminPro-UltraBlackItalic.otf") format("opentype"); font-weight: 900; font-style: italic; font-display: swap; }

/* Skolar Gujarati — brand display face, licensed copy shipped */
@font-face { font-family: "Skolar Gujarati"; src: url("fonts/SkolarGujarati-Light.otf")    format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Skolar Gujarati"; src: url("fonts/SkolarGujarati-Regular.otf")  format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Skolar Gujarati"; src: url("fonts/SkolarGujarati-Medium.otf")   format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Skolar Gujarati"; src: url("fonts/SkolarGujarati-Semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Skolar Gujarati"; src: url("fonts/SkolarGujarati-Bold.otf")     format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

/* ===========================================================
   :root — primitive tokens
   =========================================================== */
:root {
  /* ---------- Brand color primitives (Brand.pdf, p.3) ---------- */
  --tli-yellow:        #EBCF00; /* primary accent — logo, headlines, rules */
  --tli-yellow-deep:   #AE9E34; /* dim/aged variant for hover, on-yellow text */
  --tli-cream:         #FFFAEE; /* "white" — actually a warm off-white */
  --tli-graphite:      #282826; /* near-black, slight warm cast */
  --tli-black:         #000000; /* true black, used on dark surfaces */
  --tli-grey:          #B5B7BA; /* neutral cool grey for borders, captions */

  /* ---------- Derived neutrals (warm scale, cream → graphite) ---------- */
  --cream-100: #FFFAEE;
  --cream-200: #F7F1E2;  /* faint surface tint */
  --cream-300: #EAE3D2;  /* dividers on cream */
  --grey-400:  #B5B7BA;
  --grey-500:  #8A8C8F;
  --grey-700:  #4A4A48;
  --graphite:  #282826;
  --black:     #000000;

  /* ---------- Semantic colors (light / cream surface — DEFAULT) ---------- */
  --bg:           var(--cream-100);    /* page background */
  --bg-elev:      #FFFFFF;             /* elevated card */
  --bg-inverse:   var(--graphite);     /* inverted (dark) section */
  --surface-tint: rgba(40, 40, 38, 0.04);

  --fg:           var(--graphite);     /* primary text */
  --fg-muted:     rgba(40, 40, 38, 0.66);
  --fg-faded:     rgba(40, 40, 38, 0.45);
  --fg-on-dark:   var(--cream-100);
  --fg-on-yellow: var(--graphite);     /* accessible: graphite on yellow */

  --border:        rgba(40, 40, 38, 0.14);
  --border-strong: var(--graphite);
  --border-on-dark: rgba(255, 250, 238, 0.22);

  --accent:       var(--tli-yellow);
  --accent-deep:  var(--tli-yellow-deep);
  --accent-rule:  var(--tli-yellow);

  /* ---------- Status (used sparingly — finance UIs) ---------- */
  --pos:  #1f8a5b;  /* up / gain — quiet green */
  --neg:  #c93b3b;  /* down / loss — quiet red */
  --info: #4A6CF7;

  /* ---------- Typography primitives ---------- */
  --font-display: "Skolar Gujarati", serif;
  --font-text:    "Acumin Pro", sans-serif;
  --font-mono:    "Acumin Pro", sans-serif;

  /* Scale (1.250 — major third, restrained for finance) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-64: 64px;
  --fs-80: 80px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.45;
  --lh-relaxed: 1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.08em;     /* navs, eyebrows */
  --tracking-xwide:  0.22em;     /* utility bars, ticker */

  /* ---------- Spacing (8pt grid) ---------- */
  --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;

  /* ---------- Radii — restrained, square-leaning ---------- */
  --radius-0: 0;
  --radius-1: 2px;     /* hairline corners — chips, gold rules */
  --radius-2: 4px;     /* default control radius */
  --radius-3: 8px;     /* cards, primary buttons */
  --radius-4: 16px;    /* hero glass cards */
  --radius-pill: 999px;

  /* ---------- Borders ---------- */
  --hairline:     1px solid var(--border);
  --rule-thick:   2px solid var(--graphite);
  --rule-yellow:  2px solid var(--accent);

  /* ---------- Shadows — soft, never colored ---------- */
  --shadow-1: 0 1px 2px rgba(40,40,38,0.06);
  --shadow-2: 0 4px 12px rgba(40,40,38,0.08);
  --shadow-3: 0 8px 28px rgba(40,40,38,0.12);
  --shadow-4: 0 18px 48px rgba(40,40,38,0.18);
  --shadow-glass-dark: 0 8px 32px rgba(0, 0, 0, 0.45);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 120ms;  /* press */
  --dur-2: 200ms;  /* hover */
  --dur-3: 320ms;  /* layout */
  --dur-4: 600ms;  /* hero/scroll */

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --header-h: 75px;
  --gutter: clamp(24px, 5vw, 80px);
}

/* ---------- Dark / inverse surface override ----------------------- */
.tli-dark,
.tli-inverse {
  --bg:        var(--black);
  --bg-elev:   #11151A;
  --fg:        var(--cream-100);
  --fg-muted:  rgba(255, 250, 238, 0.62);
  --fg-faded:  rgba(255, 250, 238, 0.45);
  --border:    rgba(255, 250, 238, 0.18);
  --surface-tint: rgba(255, 250, 238, 0.06);
  color: var(--fg);
  background: var(--bg);
}

/* ===========================================================
   Semantic typography — apply to real elements OR via classes
   =========================================================== */

/* Eyebrow / utility — wide-tracked, all caps, small */
.eyebrow,
.tli-eyebrow {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Display — used sparingly, for "VALUES" board headlines */
.display,
h1.tli-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 80px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

/* H1 — hero headlines ("RESHAPING the markets,") */
.h1,
h1 {
  font-family: var(--font-display);
  font-weight: 400;            /* keyword "RESHAPING" goes weight 700 inline */
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.18;
  letter-spacing: -0.5px;
  color: var(--fg);
  margin: 0;
}
h1 strong, .h1 strong { font-weight: 700; }

/* H2 — section titles */
.h2,
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: var(--lh-snug);
  letter-spacing: -0.2px;
  color: var(--fg);
  margin: 0;
}

/* H3 — sub-section / footer column headings */
.h3,
h3 {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  letter-spacing: 0.2px;
  color: var(--fg);
  margin: 0;
}

/* H4 — card title / dense data */
.h4,
h4 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  letter-spacing: 0.15px;
  color: var(--fg);
  margin: 0;
}

/* Body — Acumin Pro 16/1.5 — brand recommended Regular */
.body,
p {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg);
  margin: 0 0 var(--space-3);
}
p:last-child { margin-bottom: 0; }

/* Editorial body — serif body (used in hero card paragraphs) */
.body-serif {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}
.body-serif strong { font-weight: 600; }

/* Lead / quote — bigger, serif italic-friendly */
.lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: -0.1px;
  color: var(--fg);
}

/* Small / caption */
.small,
small,
.caption {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--fg-muted);
}

/* Nav / button label — Acumin Bold, wide-tracked */
.nav-label,
.btn-label {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--fs-16);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fg);
}

/* Mono — tickers, numbers, code */
.mono,
code,
kbd {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-14);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Tabular figures — apply on any number-heavy element */
.tabular { font-variant-numeric: tabular-nums; }

/* ===========================================================
   Brand utility patterns
   =========================================================== */

/* The "gold rule" — gradient yellow fade used under headlines */
.gold-rule {
  display: block;
  height: 2px;
  width: 283px;
  max-width: 100%;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    rgba(235,207,0,0) 0%,
    var(--accent) 50%,
    rgba(235,207,0,0) 100%);
}

/* Hard yellow rule — used as left-edge accent in footer headings */
.yellow-tick {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  vertical-align: -0.12em;
  margin-right: 8px;
}

/* Underline rule echoing "THE LONG INVESTOR ___" lockup */
.lockup-rule {
  display: block;
  height: 1px;
  background: currentColor;
  opacity: 0.9;
  margin: 4px 0;
}