/* ============================================================
   GXJ Productions — design tokens
   Derived 1:1 from the Cinemaflow Webflow template (Home V1)
   + the Figma "George X James Productions" design (node 1577:371).

   FONT NOTE: the Figma design renders in Inter; the template
   ships Inter Tight. We follow the design with Inter Tight and
   keep the GXJ brand fonts (Aeroko / GT Eesti, see fonts.css)
   one variable-swap away, same pattern as gxj-events.
   ============================================================ */

:root {
  /* ---- Fonts ---- */
  --font-display: "Aeroko", "Arial Black", system-ui, sans-serif;
  --font-body:    "GT Eesti", "Helvetica Neue", system-ui, sans-serif;

  /* ---- Palette (Productions = near-black + warm tan accent) ---- */
  --c-bg:         #020202;
  --c-card:       #0a0a0a;
  --c-white:      #ffffff;
  --c-heading:    #a4a4a4;   /* muted heading gray, white/accent spans pop */
  --c-body:       #c0c0c0;
  --c-accent:     #cea281;   /* warm tan */
  --c-label:      #626262;   /* form labels / section numbers */
  --c-line:       #2a2a2a;
  --glass:        rgba(255, 255, 255, 0.1);

  /* ---- Type scale (exact Figma render values, node 1577:860) ---- */
  --fs-h1: 54.5px; --lh-h1: 1.2275; --ls-h1: -0.033em;
  --fs-h2: 43.5px; --lh-h2: 1.3793; --ls-h2: -0.033em;
  --fs-h3: 33px;   --lh-h3: 1.3554; --ls-h3: -0.033em;
  --fs-h4: 22px;   --lh-h4: 1.364;  --ls-h4: -0.033em;
  --fs-h5: 18px;   --lh-h5: 1.389;  --ls-h5: -0.033em;
  --fs-stat: 55.5px;
  --fs-body: 16.2px; --lh-body: 1.667; --ls-body: -0.033em;
  --fs-small: 16.2px;
  --fs-label: 14px;

  /* ---- Spacing (Cinemaflow spacers) ---- */
  --sp-xs: 20px;
  --sp-s:  24px;
  --sp-r:  32px;
  --sp-m:  40px;
  --sp-l:  48px;
  --sp-xl: 56px;
  --pad-section: 180px;   /* ---padding-default desktop */
  --pad-medium:  140px;
  --pad-small:   80px;

  /* ---- Layout ---- */
  --container: 1296px;    /* --container-size--default */
  --container-pad: 24px;

  /* ---- Radii ---- */
  --r-media: 24px;
  --r-chip: 14px;
  --r-icon: 12px;
  --r-pill: 300px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.45s;
}

@media screen and (max-width: 991px) {
  :root {
    --pad-section: 120px;
    --pad-medium: 100px;
    --fs-h1: 47px; --fs-h2: 38px; --fs-h3: 29px; --fs-stat: 47px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --pad-section: 80px;
    --pad-medium: 72px;
    --pad-small: 64px;
    --container-pad: 20px;
    --fs-h1: 36px; --fs-h2: 31px; --fs-h3: 25px; --fs-h4: 20px;
    --fs-stat: 40px;
  }
}

@media screen and (max-width: 479px) {
  :root {
    --fs-h1: 31px; --fs-h2: 26px; --fs-h3: 22px;
    --fs-stat: 36px;
    --fs-body: 15.5px;
  }
}