/* The Gorilla Effect — Color & Type System
 * ─────────────────────────────────────────
 * Source of truth: uploads/TGE colours new.png + Asset logos (2,4,5,6,8,9)
 * Wordmark typeface (display): geometric sans, single-story 'a', sliced terminals.
 * Closest free match: Bebas Neue / Oswald are NOT right; the wordmark resembles
 * a custom geometric like "Druk Wide" / "Akira Expanded" — but on Google Fonts the
 * closest readily-available match is "Archivo Black" or "Big Shoulders Display".
 * For body, the brand uses a humanist sans (sentence-cased on web copy); we map
 * to "Inter" as a workhorse default. FLAG: see README — ask user for original
 * wordmark TTF if available.
 */

:root {
  /* ── Brand color tokens ──────────────────────────────── */
  --tge-ink:        #191E29;  /* deepest near-black, primary surfaces */
  --tge-navy:       #132D46;  /* deep navy, secondary surface */
  --tge-emerald:    #01C38D;  /* signature accent — the Gorilla green */
  --tge-slate:      #696E79;  /* neutral mid gray */
  --tge-white:      #FFFFFF;

  /* Tints / shades derived from the core 5 (use sparingly) */
  --tge-emerald-700: #00A176;  /* hover/press state for emerald */
  --tge-emerald-300: #5DDEB7;  /* tint for backgrounds, charts */
  --tge-emerald-100: #E5F9F2;  /* very light wash */
  --tge-navy-700:    #0C1F33;
  --tge-slate-300:   #BFC3C9;
  --tge-slate-100:   #ECEDEF;

  /* ── Semantic surface tokens ─────────────────────────── */
  --bg:           var(--tge-white);
  --bg-inverse:   var(--tge-ink);
  --bg-elevated:  var(--tge-white);
  --bg-muted:     var(--tge-slate-100);
  --bg-accent:    var(--tge-emerald);

  /* Foreground / text */
  --fg1:          var(--tge-ink);     /* primary text */
  --fg2:          var(--tge-slate);   /* secondary / meta text */
  --fg3:          var(--tge-slate-300); /* tertiary, dividers-as-text */
  --fg-on-dark:   var(--tge-white);
  --fg-on-accent: var(--tge-ink);     /* emerald is bright — use ink, not white */
  --fg-accent:    var(--tge-emerald);

  /* Borders / dividers */
  --border:       rgba(25, 30, 41, 0.10);
  --border-strong:rgba(25, 30, 41, 0.24);
  --border-on-dark: rgba(255, 255, 255, 0.14);

  /* Focus / link */
  --link:         var(--tge-ink);     /* underlined ink, NOT colored */
  --link-hover:   var(--tge-emerald);
  --focus-ring:   var(--tge-emerald);

  /* ── Typography ──────────────────────────────────────── */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Geist", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* Type scale — display is BIG and tight; body is comfortable */
  --fs-display-xl: clamp(56px, 8vw, 128px);  /* hero kicker */
  --fs-display-lg: clamp(40px, 5.5vw, 80px); /* page H1 */
  --fs-h1: 56px;
  --fs-h2: 40px;
  --fs-h3: 28px;
  --fs-h4: 20px;
  --fs-body-lg: 20px;
  --fs-body:    17px;
  --fs-body-sm: 15px;
  --fs-meta:    13px;
  --fs-eyebrow: 12px;

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.5;
  --lh-loose:   1.65;

  --ls-display: -0.02em;
  --ls-eyebrow: 0.14em;

  /* ── Spacing scale (4px base) ────────────────────────── */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* ── Radii ───────────────────────────────────────────── */
  --r-0: 0px;       /* default — TGE leans squared */
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;  /* used very sparingly */

  /* ── Elevation / shadow ─────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(25,30,41,0.06);
  --shadow-2: 0 6px 24px rgba(25,30,41,0.08);
  --shadow-3: 0 24px 60px rgba(25,30,41,0.18);
  --shadow-emerald: 0 12px 40px rgba(1, 195, 141, 0.30);

  /* ── Motion ──────────────────────────────────────────── */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.65,.05,.35,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
}

/* ── Semantic element styles (drop into html/body) ──────── */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  color: var(--fg1);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}

h1, .h1 { font-size: var(--fs-display-lg); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); text-transform: none; letter-spacing: 0; line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--fs-h4); text-transform: none; letter-spacing: 0; font-weight: var(--fw-bold); }

p { margin: 0 0 var(--s-4) 0; max-width: 64ch; text-wrap: pretty; }
p.lead { font-size: var(--fs-body-lg); color: var(--fg1); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg2);
}

a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--link-hover); }

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

blockquote {
  font-family: var(--font-display);
  text-transform: none;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin: 0;
  padding-left: var(--s-5);
  border-left: 3px solid var(--tge-emerald);
}

::selection { background: var(--tge-emerald); color: var(--tge-ink); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }