/* GHL Success Path × Buzz Interactive redesign — colors + type
 * Hybrid: Buzz's bold editorial layout + GHLSP's navy/gold palette
 */

/* ============================================================
 * FONTS — Google Fonts substitutes
 * SUBSTITUTION FLAG: The real Buzz Interactive site appears to use a
 * custom tight geometric/oblique sans for display + a neutral grotesk
 * for body. Closest free matches:
 *   display → Space Grotesk (tight, geometric, slightly oblique feel)
 *   body    → Inter (neutral, legible grotesk)
 *   accent  → Instrument Serif (editorial italic for contrast pulls)
 * Replace if you have the real license.
 * ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ========= CORE PALETTE — from GHLSP logo =========
   * The logo uses a deep navy (stair-step mark, 'SUCCESS PATH' wordmark)
   * and a warm signature yellow (triangle accents, 'GHL' mark).
   */
  --ghlsp-navy-950: #0A1526;   /* deepest, for hero / dark sections */
  --ghlsp-navy-900: #0F1F38;   /* primary dark */
  --ghlsp-navy-800: #142B4A;   /* logo navy */
  --ghlsp-navy-700: #1E3C60;
  --ghlsp-navy-500: #3B5F88;
  --ghlsp-navy-300: #8AA3C2;
  --ghlsp-navy-100: #DCE5F0;

  --ghlsp-gold-600: #E0A91E;
  --ghlsp-gold-500: #FDBE2C;   /* signature yellow — CTA + highlight */
  --ghlsp-gold-400: #FFCE5A;
  --ghlsp-gold-100: #FFF2CC;

  /* Buzz-style accent: a single punchy secondary for dots / highlights.
   * Buzz uses a hot magenta. We keep the gold as primary but add
   * a deep "sticker red" for editorial dots/marks. */
  --accent-dot: #FF3D2E;        /* hot accent — small dots only */

  /* Neutrals — near-black + paper-white, high contrast */
  --ink-950: #0A0A0A;          /* on-light body text, pure ink */
  --ink-800: #1B1B1B;
  --ink-600: #4A4A4A;
  --ink-400: #8B8B8B;
  --ink-200: #D6D6D6;
  --ink-100: #EDEDEA;
  --paper:   #F5F2EC;          /* warm off-white canvas */
  --paper-bright: #FFFFFF;

  /* ========= SEMANTIC ========= */
  --bg:            var(--paper);
  --bg-bright:     var(--paper-bright);
  --bg-dark:       var(--ghlsp-navy-950);
  --bg-section:    var(--ink-950);     /* alt dark section */
  --fg:            var(--ink-950);
  --fg-muted:      var(--ink-600);
  --fg-subtle:     var(--ink-400);
  --fg-on-dark:    #F8F6F1;
  --fg-on-dark-muted: #9BA3AE;
  --brand:         var(--ghlsp-gold-500);
  --brand-ink:     var(--ghlsp-navy-900);
  --rule:          var(--ink-950);     /* Buzz uses full-opacity black rules */
  --rule-soft:     #00000014;

  /* ========= RADII ========= */
  --r-pill: 999px;
  --r-lg: 20px;
  --r-md: 12px;
  --r-sm: 6px;

  /* ========= SHADOWS ========= */
  /* Buzz is flat. We use thin offset shadows sparingly. */
  --shadow-card: 0 1px 0 #0000000a, 0 0 0 1px #00000010;
  --shadow-lift: 0 18px 40px -12px #0a152640, 0 0 0 1px #00000010;

  /* ========= SPACING (8pt) ========= */
  --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;

  /* ========= TYPE ========= */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-editorial: 'Instrument Serif', ui-serif, Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ============================================================
 * TYPE SCALE — editorial, very large at the top, tight tracking
 * ============================================================ */
.t-mega { font-family: var(--font-display); font-weight: 500; font-size: clamp(64px, 11vw, 200px); line-height: 0.9; letter-spacing: -0.04em; }
.t-display { font-family: var(--font-display); font-weight: 500; font-size: clamp(48px, 7vw, 120px); line-height: 0.92; letter-spacing: -0.035em; }
.t-h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 5vw, 72px); line-height: 0.96; letter-spacing: -0.03em; }
.t-h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 3.5vw, 48px); line-height: 1.05; letter-spacing: -0.02em; }
.t-h3 { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.15; letter-spacing: -0.015em; }
.t-lead { font-family: var(--font-body); font-weight: 400; font-size: 20px; line-height: 1.45; letter-spacing: -0.005em; }
.t-body { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.55; }
.t-small { font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 1.4; letter-spacing: 0.01em; }
.t-eyebrow { font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; }
.t-editorial { font-family: var(--font-editorial); font-style: italic; font-weight: 400; font-size: clamp(32px, 3vw, 48px); line-height: 1.05; letter-spacing: -0.01em; }

/* Element defaults */
html { background: var(--bg); color: var(--fg); font-family: var(--font-body); }
body { margin: 0; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; line-height: 0.96; }
h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; }
p { margin: 0 0 1em; }
a { color: inherit; }