/* PodcastGTM — Direction B: Pipeline Console
   Design tokens. Every color, font, size, radius and duration used by the site lives here.
   Pages and components reference var(--*) only — never raw hex values. */

:root {
  /* Surfaces */
  --void: #0A0C0B;          /* page background */
  --panel: #101412;         /* raised surface, bands, cards */
  --panel-2: #151A18;       /* hover / nested surface */
  --grid: #1C211F;          /* dot-matrix, empty bar track */
  --line: #26302C;          /* 1px rules, borders */
  --line-strong: #3A4641;   /* emphasized borders, inputs on hover */

  /* Signal colors */
  --lime: #C8FF3E;          /* primary signal: CTAs, positive data, live state */
  --lime-ink: #0A0C0B;      /* text on lime */
  --lime-dim: rgba(200, 255, 62, .12);
  --lime-glow: 0 0 10px rgba(200, 255, 62, .9);
  --cobalt: #5B7CFF;        /* secondary data series, button offset shadow */
  --cobalt-dim: rgba(91, 124, 255, .14);
  --amber: #FFB547;         /* warnings, "limited" states — use sparingly */
  --red: #FF5C4D;           /* errors only */

  /* Text */
  --text: #E8ECE9;          /* primary text */
  --muted: #9AA39E;         /* body secondary */
  --steel: #8A94A6;         /* labels, meta */
  --faint: #5E6763;         /* disabled, tertiary */

  /* Type families */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (fluid) */
  --fs-hero: clamp(52px, 8.4vw, 112px);
  --fs-page: clamp(44px, 6.4vw, 84px);
  --fs-h2: clamp(34px, 4.6vw, 58px);
  --fs-h3: clamp(22px, 2.2vw, 28px);
  --fs-kpi: clamp(72px, 10vw, 140px);
  --fs-kpi-sm: clamp(40px, 5vw, 64px);
  --fs-lede: clamp(17px, 1.5vw, 19px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-label: 12px;

  --lh-tight: .92;
  --lh-heading: 1.02;
  --lh-body: 1.6;
  --track-hero: -.045em;
  --track-heading: -.035em;
  --track-label: .06em;

  /* Space & layout */
  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 9vw, 112px);
  --section-tight: clamp(40px, 6vw, 72px);
  --gap: 24px;
  --gap-lg: 48px;
  --header-h: 64px;

  /* Shape */
  --radius: 0;              /* hard corners everywhere */
  --border: 1px solid var(--line);
  --offset-shadow: 4px 4px 0 var(--cobalt);

  /* Motion */
  --t-fast: 150ms;
  --t-med: 400ms;
  --t-slow: 1300ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Background texture */
  --dots: radial-gradient(circle, var(--grid) 1px, transparent 1.2px);
  --dots-size: 16px 16px;

  color-scheme: dark;
}