/* =====================================================================
   PODCAST SUMMIT — Foundations
   Colors, type & semantic tokens lifted from the Figma source of truth
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Oswald:wght@400;500;700&display=swap");

:root {
  /* ─────────── Brand Colors ─────────── */
  /* Primary — "Summit Orange" — the action color */
  --ps-orange-500: rgb(240, 87, 42);     /* primary, glow */
  --ps-orange-600: rgb(200, 67, 29);     /* button fill (slightly darker) */
  --ps-orange-400: rgb(244, 89, 37);     /* accent rule, dot, theme-pill */
  --ps-orange-300: rgb(249, 112, 21);    /* warm secondary text */

  /* Accent — used in pill badges, "Most Popular" glows */
  --ps-blue-500: rgb(0, 85, 255);
  --ps-blue-glow-15: rgba(0, 85, 255, 0.15);
  --ps-blue-glow-08: rgba(0, 85, 255, 0.08);

  /* Vendor-booth gradient accent */
  --ps-green-500: rgb(42, 240, 134);

  /* Hot pink — secondary brand accent (v3/archive variant) */
  --ps-pink-500: rgb(227, 0, 113);

  /* Purple — "Dedicated Podcast Station" partner card */
  --ps-purple-500: rgb(98, 0, 238);
  --ps-purple-glow-15: rgba(102, 0, 255, 0.15);

  /* ─────────── Neutrals (dark stage) ─────────── */
  --ps-bg:           rgb(14, 15, 19);    /* canvas — "Stage Black" */
  --ps-bg-2:         rgb(18, 18, 22);
  --ps-bg-3:         rgb(20, 21, 25);
  --ps-ink:          rgb(0, 0, 5);       /* near-black text on light */
  --ps-ink-true:     rgb(0, 0, 0);

  --ps-white:        rgb(255, 255, 255);
  --ps-off-white:    rgb(250, 250, 250);
  --ps-grey-200:     rgb(218, 218, 218);
  --ps-grey-400:     rgb(137, 138, 140);
  --ps-grey-500:     rgb(129, 136, 152);
  --ps-grey-600:     rgb(103, 111, 126);
  --ps-grey-700:     rgb(87, 87, 87);
  --ps-stroke-line:  rgb(43, 48, 59);

  /* ─────────── Semantic on-dark ─────────── */
  --fg-1: var(--ps-white);                       /* headlines, primary text */
  --fg-2: rgba(255, 255, 255, 0.8);              /* FAQ headings, nav */
  --fg-3: rgba(255, 255, 255, 0.6);              /* sub-heads, body de-emph */
  --fg-4: rgba(255, 255, 255, 0.5);              /* meta, dates */
  --fg-5: rgba(255, 255, 255, 0.4);              /* FAQ answer copy */
  --fg-on-light: var(--ps-ink-true);

  --stroke-soft:   rgba(255, 255, 255, 0.07);    /* card border */
  --stroke-mid:    rgba(255, 255, 255, 0.10);    /* nav hairline */
  --stroke-strong: rgba(255, 255, 255, 0.20);    /* speaker-card border */
  --stroke-warm:   rgba(244, 89, 37, 0.40);      /* theme pill */

  --surface-card:    rgba(255, 255, 255, 0.03);  /* FAQ row */
  --surface-glass-1: rgba(0, 0, 0, 0.30);        /* nav bottom */
  --surface-glass-2: rgba(0, 0, 0, 0.40);        /* card grad bottom */

  /* ─────────── Card gradients (from Figma) ─────────── */
  --grad-card-blue:    linear-gradient(rgba(0,85,255,0.15) 0%, rgba(0,0,0,0.4) 76%);
  --grad-card-orange:  linear-gradient(rgb(240,87,42) 0%, rgba(0,0,0,0.4) 76%);
  --grad-card-purple:  linear-gradient(rgba(102,0,255,0.15) 0%, rgba(0,0,0,0.4) 76%);
  --grad-card-green:   linear-gradient(rgb(42,240,134) 0%, rgba(0,0,0,0.4) 76%);
  --grad-pill-blue:    linear-gradient(rgba(0,85,255,0.15) 0%, rgba(0,0,0,0.4) 100%);
  --grad-badge-radial: radial-gradient(rgba(0,85,255,0.08) 0%, rgba(142,142,142,0.10) 100%);
  --grad-nav:          linear-gradient(rgba(0,0,0,0) 7%, rgba(0,0,0,0.3) 100%);
  --grad-fade-bottom:  linear-gradient(rgba(14,15,19,0) 0%, rgb(14,15,19) 100%);

  /* ─────────── Radii ─────────── */
  --radius-xs:   8px;
  --radius-sm:   10px;   /* buttons */
  --radius-md:   16px;   /* FAQ rows */
  --radius-lg:   20px;   /* pricing/partner cards */
  --radius-xl:   30px;   /* speaker cards */
  --radius-pill: 9999px;

  /* ─────────── Shadows ─────────── */
  --shadow-cta:        0 0 0 1px rgb(240,87,42), 0 8px 40px 0 rgb(240,87,42);
  --shadow-popular:    0 -4px 4px 0 rgb(0,85,255);
  --shadow-popular-sm: 0 -2px 5px 0 rgb(0,85,255);

  /* ─────────── Spacing scale ─────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  54px;
  --space-9:  80px;
  --space-10: 120px;

  /* ─────────── Type families ─────────── */
  --font-sans:    "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;     /* for THE PODCAST SUMMIT 2026 hero */
  --font-condensed: "Oswald", "Inter", ui-sans-serif, sans-serif;    /* archive / countdown */
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* =====================================================================
   Semantic type — the deck/site only uses ~5 sizes. These match Figma.
   Hero uses Inter Bold @ 95.4 px ALL CAPS. Section heads use DM Sans 54.
   Body is DM Sans 16. Sub-heads use DM Sans 32.
   ===================================================================== */

.ps-hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 95.4px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.ps-hero-outline {
  /* Used for "SUMMIT 2026" stroke variant on hero */
  -webkit-text-stroke: 1px rgba(255,255,255,0.35);
  color: transparent;
}

.ps-section-title {
  font-family: var(--font-sans);
  font-weight: 400;     /* DM Sans Regular per Figma */
  font-size: 54px;
  line-height: 1;
  color: var(--fg-1);
}
.ps-section-title-muted {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 54px;
  line-height: 1;
  color: var(--fg-3);
}

.ps-h2 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.05;
  color: var(--fg-1);
}

.ps-h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  color: var(--fg-1);
}

.ps-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.10em;
  text-transform: none;
  color: var(--ps-orange-400);
}

.ps-faq-question {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18.3px;
  line-height: 28px;
  color: var(--fg-2);
}

.ps-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--fg-1);
}
.ps-body-muted {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--fg-3);
}
.ps-body-sm {
  font-family: var(--font-sans);
  font-size: 15.1px;
  line-height: 24px;
  color: var(--fg-5);
}

.ps-button-label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--fg-1);
}