/* ==========================================================================
   Design tokens — mirrored 1:1 from the Figma variables (node 1313:75370)
   ========================================================================== */

:root {
  /* ---- Colors ---------------------------------------------------------- */
  --bg-1: #111111;          /* page background            */
  --bg-2: #1a1a1a;          /* cards / raised surfaces     */
  --bg-3: #1f1f1f;          /* nested surfaces             */
  --card-fill: #262626;     /* raised card surface (lighter than --bg-2) */
  --black: #131313;

  --white: #ffffff;
  --white-soft: #fbfbfb;
  --muted: #dbdbdb;         /* secondary / body text       */
  --muted-2: #9a9a9a;       /* tertiary / captions         */
  --grey: #e9eaed;          /* Figma "Grey" — disabled CTA fill      */
  --grey-darker: #babcc3;   /* Figma "Grey Darker" — placeholders    */

  --primary: #d8ff00;       /* lime accent                 */
  --primary-hover: #c2e600;
  --primary-active: #adcc00;
  --primary-light: #f3ffb0;
  --primary-light-active: #e6ff59;
  --primary-lighter: #f9ffd9;

  --card-border: rgba(255, 255, 255, 0.16);
  --transparent-2: rgba(219, 219, 219, 0.10);   /* Figma Transparent-2 card fill */
  --divider: rgba(255, 255, 255, 0.10);
  --nav-glow: 0 2px 40px rgba(255, 255, 255, 0.10);

  /* ---- Typography ------------------------------------------------------ */
  --font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Fluid display sizes: clamp(min, preferred, figma-max) */
  --h1: clamp(2.75rem, 9vw, 8rem);       /* 128px  Roboto Black  */
  --h2: clamp(2.25rem, 6vw, 5.625rem);   /* 90px   */
  --h5: clamp(2rem, 5vw, 4rem);          /* 64px   */
  --h3: clamp(1.75rem, 4vw, 3rem);       /* 48px   */
  --h4: clamp(1.5rem, 3vw, 2rem);        /* 32px   */
  --title-1: 1.5rem;                     /* 24px   */
  --title-2: 1.125rem;                   /* 18px   */
  --title-3: 1rem;                       /* 16px   */
  --body-1: 1.125rem;                    /* 18px   */
  --body-2: 1rem;                        /* 16px   */

  /* ---- Layout ---------------------------------------------------------- */
  --page-max: 1440px;
  --content-max: 1280px;
  --gutter: 80px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-btn: 12px;        /* Figma CTA buttons: rounded-[12px] (squared, not pill) */
  --radius-pill: 999px;

  --section-pad-y: 120px;
}

@media (max-width: 1199px) {
  :root { --gutter: 48px; --section-pad-y: 96px; }
}
@media (max-width: 767px) {
  :root { --gutter: 20px; --section-pad-y: 64px; }
}