/* =============================================================
   PRAGMATIC GROWTH ADVISORS — Design Tokens
   Brand: deep cosmos navy, chrome silver wordmarks, cosmic blue
   glow, warm capital-gold accent. Tone: executive, scientific,
   restrained — never decorative. "Forces hidden in plain sight."
   ============================================================= */

/* ---------- TYPOGRAPHY -------------------------------------- */
/* Inter — primary UI + body. Closest free match to the clean
   geometric sans seen across PGA marketing and the PGA wordmark.
   Substituted for an undisclosed proprietary face — flag for
   review with the user. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* --- Color tokens ------------------------------------------ */

  /* Cosmos — the deep blue-black that anchors every brand surface.
     Imagine the night side of an eclipse photograph. */
  --cosmos-1000: #050a14;   /* deepest — used behind type only */
  --cosmos-900:  #0a1426;   /* primary brand background        */
  --cosmos-800:  #0f1d35;   /* card / hero panel               */
  --cosmos-700:  #16294a;   /* divider / muted surface         */
  --cosmos-600:  #20355d;   /* ring / hairline emphasis        */

  /* Gravity — the cosmic blue glow at the edge of the eclipse.
     Use as accent, focus, link, data emphasis. */
  --gravity-100: #e6f0ff;
  --gravity-200: #b9d4ff;
  --gravity-300: #7eb1ff;
  --gravity-400: #4a8eff;
  --gravity-500: #2a6fdb;   /* primary action blue             */
  --gravity-600: #1d56b8;
  --gravity-700: #163f8a;

  /* Chrome — the silvers used in the PGA wordmark and supporting
     UI. Cool, neutral, faintly blue. */
  --chrome-50:   #f6f8fb;
  --chrome-100:  #eceff5;
  --chrome-200:  #d6dce6;
  --chrome-300:  #b3bcca;
  --chrome-400:  #8a95a8;
  --chrome-500:  #6a7488;
  --chrome-600:  #4d5667;
  --chrome-700:  #353b48;
  --chrome-800:  #232732;
  --chrome-900:  #14171e;

  /* Capital — warm gold/amber. Pulled from the treasure-chest
     imagery; reserved for value/profit emphasis. Never as a
     button fill; use as a thin accent or numeric callout. */
  --capital-100: #fbf1d8;
  --capital-300: #e7c378;
  --capital-500: #c9942b;   /* signature gold                   */
  --capital-700: #8a6010;

  /* Signal — semantic colors, kept restrained and on-brand. */
  --signal-positive: #2f9e6b;     /* growth / favorable trend   */
  --signal-caution:  #c98a1f;     /* watch / approaching drift  */
  --signal-negative: #c0433a;     /* drag / underperformance    */
  --signal-info:     var(--gravity-500);

  /* Metcalfe accents — only used inside network/data diagrams,
     never in chrome. Sampled from the network illustration. */
  --network-cyan:    #5cb8e6;
  --network-magenta: #d65aa8;

  /* --- Semantic surface + text aliases ----------------------- */
  /* Dark surface (default brand canvas) */
  --bg:          var(--cosmos-900);
  --bg-elevated: var(--cosmos-800);
  --bg-sunken:   var(--cosmos-1000);
  --hairline:    rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);

  --fg:          #eef2f8;          /* primary text on dark      */
  --fg-muted:    var(--chrome-300);
  --fg-subtle:   var(--chrome-400);
  --fg-disabled: var(--chrome-500);
  --fg-inverse:  var(--cosmos-900);

  --accent:      var(--gravity-400);
  --accent-press:var(--gravity-600);
  --accent-soft: rgba(74, 142, 255, 0.14);

  /* Light surface (used on slides, reports, secondary contexts) */
  --bg-light:          #ffffff;
  --bg-light-elevated: var(--chrome-50);
  --bg-light-sunken:   var(--chrome-100);
  --hairline-light:    rgba(10, 20, 38, 0.10);
  --fg-on-light:       var(--cosmos-900);
  --fg-on-light-muted: var(--chrome-600);

  /* --- Type stacks ------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Fraunces", "Iowan Old Style", "Charter", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- Spacing (4pt baseline) ------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Radii — restrained. PGA is square-shouldered. -------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;     /* default for cards, fields, buttons   */
  --radius-lg: 10px;
  --radius-xl: 16px;    /* hero panels only                     */
  --radius-pill: 999px; /* tags, status pills                   */

  /* --- Elevation — soft, cool, never punchy ----------------- */
  --shadow-1: 0 1px 2px rgba(5, 10, 20, 0.18);
  --shadow-2: 0 4px 14px rgba(5, 10, 20, 0.25), 0 1px 2px rgba(5, 10, 20, 0.18);
  --shadow-3: 0 18px 40px rgba(5, 10, 20, 0.35), 0 2px 6px rgba(5, 10, 20, 0.25);

  /* Cosmic glow — the eclipse rim. Used sparingly: hero
     headlines, the PGA logo, the active state of a featured CTA. */
  --glow-gravity: 0 0 0 1px rgba(74, 142, 255, 0.35),
                  0 0 28px 4px rgba(74, 142, 255, 0.30);
  --glow-capital: 0 0 0 1px rgba(201, 148, 43, 0.35),
                  0 0 24px 2px rgba(201, 148, 43, 0.25);

  /* --- Motion ----------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-decel:    cubic-bezier(0.05, 0.7, 0.1, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  /* --- Typography scale ------------------------------------- */
  /* Sized for executive decks + dense marketing. Headings use
     tight tracking; body opens up. */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  56px;
  --text-5xl:  72px;
  --text-6xl:  96px;

  --leading-tight: 1.08;
  --leading-snug:  1.22;
  --leading-base:  1.5;
  --leading-loose: 1.65;

  --tracking-tight:  -0.022em;
  --tracking-snug:   -0.012em;
  --tracking-base:   0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.14em;   /* eyebrow / uppercase labels   */
}

/* ---------- BASELINE ELEMENT STYLES -------------------------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-base);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — the headline voice. Set heavy, tight, never italic. */
.h-display, h1.display {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  text-wrap: balance;
}

h2, .h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
  text-wrap: balance;
}

h3, .h3 {
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
}

h4, .h4 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: 600;
}

h5, .h5 {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0;
}

/* Eyebrow — the small uppercase label that classifies a section
   (e.g. "FORCE 01 — GRAVITATIONAL PULL"). Core PGA cue. */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gravity-300);
}

/* Lede — the larger paragraph that follows a hero headline. */
.lede {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--fg-muted);
  max-width: 64ch;
  text-wrap: pretty;
}

p {
  text-wrap: pretty;
  max-width: 72ch;
}

/* Pull quote — used to land a thesis. Serif for contrast. */
.pull-quote {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

/* Term — italicized concept callout inside body copy, e.g.
   *Gravitational Pull*, *Complexity Drag*. */
.term {
  font-style: italic;
  color: var(--gravity-200);
  font-weight: 500;
}

/* Data — numeric callouts, e.g. "53%". */
.data {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--cosmos-700);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  color: var(--gravity-200);
}

a {
  color: var(--gravity-300);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--gravity-200); text-decoration: underline; }

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--space-8) 0;
}

::selection { background: var(--gravity-700); color: #fff; }