/* ————————————————————————————————
   thrdwheel — design tokens (NGL-style)
   ———————————————————————————————— */
:root {
  /* Palette — hot vertical gradient + pure black bands */
  --white: #ffffff;
  --ink: #101014;
  --black: #050506;
  --black-2: #151518;
  --black-3: #232327;
  --gray-on-black: #9d9da6;

  --pink: #ff2d7e;
  --red: #ff5864;
  --coral: #ff6a45;
  --grad: linear-gradient(180deg, #ff2d7e 0%, #ff5864 55%, #ff6a45 100%);
  --grad-chip: linear-gradient(135deg, #ff2d7e, #ff5864);

  /* Typography — one chunky rounded family, lowercase headlines */
  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

  --text-hero: clamp(4.1rem, 2.2rem + 9.5vw, 8.5rem);
  --text-h2: clamp(3rem, 1.8rem + 6vw, 5.8rem);
  --text-list: clamp(1.75rem, 1.2rem + 2.8vw, 3rem);
  --text-lead: clamp(1.02rem, 0.96rem + 0.4vw, 1.25rem);
  --text-base: 1rem;
  --text-small: 0.9rem;
  --text-tiny: 0.78rem;

  /* Rhythm */
  --band-pad: clamp(6.5rem, 5rem + 7vw, 10rem);
  --container: 72rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Curved band seams */
  --curve: clamp(28px, 5vw, 56px);

  /* Shape */
  --radius-pill: 999px;
  --radius-lg: 26px;
  --radius-md: 18px;

  /* Elevation */
  --shadow-sticker: 0 10px 24px rgba(0, 0, 0, 0.18);
  --shadow-phone: 0 14px 30px rgba(0, 0, 0, 0.25), 0 50px 100px rgba(0, 0, 0, 0.3);

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 650ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}