/* ==========================================================================
   variables.css — the single source of truth for design tokens.

   Every value comes off the Figma frame "MacBook Pro 16" - 7" (3300:14024),
   which is 1728 x 11568. Fluid values are written

       clamp(<mobile floor>, <figma px / 1728 * 100>vw, <figma px>)

   so the page reproduces the frame 1:1 at a 1728px viewport, scales
   proportionally below it, and freezes at design size above it.
   ========================================================================== */

:root {
  /* ---------- colour ----------
     Read straight off the Figma nodes; the file defines no Figma variables.
     --color-bg matches the frame's own fill exactly: Figma flattens every
     decorative export onto it, so the baked-in plates stay invisible. */
  --color-bg:          #040d2d;   /* page ground / frame fill        */
  --color-bg-deep:     #01081e;   /* footer plate        3300:16479  */
  --color-bg-artist:   #040c2a;   /* medallion fade      3300:16345  */
  --color-bg-panel:    #06123d;   /* FAQ panel           3300:16440  */
  --color-bg-card:     #0b1a4e;   /* pass panel top      3300:16265  */
  --color-bg-card-0:   rgba(4, 13, 45, 0);

  --color-text:        #e2e2e2;   /* primary text                    */
  --color-accent:      #f1f5ff;   /* pass panel border / focus ring  */
  --color-text-faq:    #f1f1f1;   /* FAQ text                        */
  --color-text-pass:   #efeff3;   /* pass text / button plate        */
  --color-text-foot:   #e4e3e3;   /* footer text                     */
  --color-on-light:    #2c2c2c;   /* nav button label                */
  --color-on-pass:     #030e2e;   /* pass button label               */

  --color-hairline:    rgba(241, 241, 241, .16);
  --color-hairline-lt: rgba(226, 226, 226, .28);

  /* ---------- type ---------- */
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-display:   clamp(30px,   3.588vw, 62px);      /* section headings   */
  --text-panel:     clamp(25px,   2.778vw, 48px);      /* "Choose your pass" */
  --text-cta-lg:    clamp(15px,   2.199vw, 38px);
  --text-artist:    clamp(19px,   2.199vw, 38px);
  --text-triad:     clamp(17px,   2.083vw, 36px);
  --text-ticket:    clamp(21px,   1.928vw, 33.315px);
  --text-note:      clamp(17px,   1.852vw, 32px);
  --text-artist-dt: clamp(15px,   1.852vw, 32px);
  --text-lg:        clamp(15px,   1.620vw, 28px);      /* lede / nav         */
  --text-nav-cta:   clamp(14px,   1.505vw, 26px);
  --text-md:        clamp(14px,   1.389vw, 24px);      /* body               */
  --text-ticket-dc: clamp(13.5px, 1.326vw, 22.904px);
  --text-ticket-bt: clamp(14px,   1.273vw, 22px);
  --text-sm:        clamp(14px,   1.240vw, 21.421px);  /* footer             */
  --text-xs:        clamp(12px,   1.102vw, 19.041px);  /* copyright          */

  /* line heights derived from the Figma text-box heights */
  --leading-display: 1.194;   /* 74 / 62 */
  --leading-lg:      1.214;   /* 34 / 28 */
  --leading-md:      1.208;   /* 29 / 24 */
  --leading-triad:   1.389;   /* 50 / 36 */

  /* ---------- spacing ---------- */
  --spacing-xs: clamp(6px,  0.579vw, 10px);
  --spacing-sm: clamp(10px, 1.157vw, 20px);
  --spacing-md: clamp(20px, 2.315vw, 40px);
  --spacing-lg: clamp(40px, 5.093vw, 88px);
  --spacing-xl: clamp(70px, 8.681vw, 150px);

  --gutter: 20px;

  /* ---------- radii ---------- */
  --radius-sm: clamp(8px,  0.700vw, 12px);
  --radius-md: clamp(12px, 1.157vw, 20px);
  --radius-lg: clamp(20px, 2.894vw, 50px);
  --radius-pill: 99px;

  /* ---------- layout ----------
     Content widths as a share of the 1728 frame. */
  --container-width: 1728px;
  --w-nav:     93.63%;   /* 1618 */
  --w-pass:    80.21%;   /* 1386 */
  --w-gallery: 91.09%;   /* 1574 */

  /* ---------- z-index scale ---------- */
  --z-decor:    1;
  --z-content:  2;
  --z-raised:   5;
  --z-nav:     40;
  --z-cursor:  90;
  --z-loader: 100;

  /* ---------- motion ----------
     Durations and eases the JS layer reads back through getComputedStyle,
     so timing lives in one place for CSS transitions and GSAP alike. */
  --dur-fast:   .18s;
  --dur-base:   .32s;
  --dur-slow:   .6s;
  --ease-out:   cubic-bezier(.22, 1, .36, 1);      /* ~expo.out  */
  --ease-soft:  cubic-bezier(.33, 1, .68, 1);      /* ~circ.out  */
}