/* ============================================================
   PN Group — Design Tokens
   Direction: dark luxury, teal accent, engineering precision
   ============================================================ */

:root {
  /* ---- Color: surfaces ---- */
  --bg: #0c0e10;
  --bg-elevated: #121519;
  --surface: #15191e;
  --surface-2: #1b2127;
  --surface-3: #222a31;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);

  /* ---- Color: brand ---- */
  --teal: #2bc4be;
  --teal-bright: #45e6df;
  --teal-deep: #169c97;
  --teal-glow: rgba(43, 196, 190, 0.45);
  --teal-wash: rgba(43, 196, 190, 0.08);

  /* ---- Color: text ---- */
  --text: #f3f6f7;
  --text-soft: #c3cdd2;
  --text-muted: #8b969d;
  --text-faint: #5d676d;

  /* ---- Typography ---- */
  --font-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;

  --text-hero: clamp(2.3rem, 1rem + 4.1vw, 4.8rem);
  --text-h2: clamp(2rem, 1.1rem + 3.4vw, 3.9rem);
  --text-h3: clamp(1.3rem, 1rem + 1.3vw, 1.95rem);
  --text-lead: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem);
  --text-base: clamp(1rem, 0.96rem + 0.18vw, 1.075rem);
  --text-sm: 0.9rem;
  --text-xs: 0.78rem;
  --text-eyebrow: 0.74rem;

  /* ---- Spacing ---- */
  --space-section: clamp(5rem, 3.4rem + 7vw, 11rem);
  --space-block: clamp(2rem, 1.4rem + 2.6vw, 4rem);
  --gutter: clamp(1.2rem, 0.6rem + 3vw, 3rem);
  --maxw: 1280px;
  --maxw-narrow: 920px;

  /* ---- Radius ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 18px 50px -20px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 1px var(--hairline), 0 30px 80px -40px rgba(0, 0, 0, 0.9);

  /* ---- Motion ---- */
  --dur-fast: 180ms;
  --dur: 360ms;
  --dur-slow: 720ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}