/* ============================================================
   GXJ Events — design tokens
   Derived 1:1 from the rekolet Webflow template + the Figma
   "George X James Events" design (node 1520:1918).

   FONTS ARE INTENTIONALLY NEUTRAL PLACEHOLDERS.
   The original theme fonts (InterDisplay, DM Mono) have been
   removed on purpose — licensed fonts will be dropped in later
   by swapping ONLY the three --font-* variables below.
   ============================================================ */

:root {
  /* ---- Brand fonts (licensed; @font-face in fonts.css) ---- */
  --font-display: "Aeroko", "Arial Black", system-ui, sans-serif;  /* titles  */
  --font-body:    "GT Eesti", "Helvetica Neue", system-ui, sans-serif; /* body / UI */
  --font-mono:    "GT Eesti", ui-monospace, Menlo, sans-serif;     /* labels/eyebrows */

  /* ---- Palette (Events = warm brown/beige, not rekolet blue) ---- */
  --c-black:      #000000;
  --c-dark-bg:    #101010;
  --c-text-white: #f3f3f3;
  --c-gray-light: #6a6a6a;
  --c-beige:      #b5a691;   /* warm section background seen in design */
  --c-beige-soft: #cabfae;
  --c-cream:      #e9e3d8;
  --c-brown:      #221308;   /* accent / primary button (GXJ events) */
  --c-brown-700:  #3a2412;
  --c-card-dark:  #1a1a1a;
  --c-line:       rgba(0,0,0,0.12);
  --c-line-light: rgba(255,255,255,0.12);

  /* glass */
  --glass-light:  rgba(255,255,255,0.10);
  --glass-strong: rgba(255,255,255,0.18);

  /* ---- Type scale (rekolet) ---- */
  --fs-h1: 130px;  --lh-h1: 1.04;  --ls-h1: -2.6px;
  --fs-h2: 86px;   --lh-h2: 1.06;  --ls-h2: -1.72px;
  --fs-h3: 74px;   --lh-h3: 1.08;  --ls-h3: -1.48px;
  --fs-h4: 64px;   --lh-h4: 1.1;   --ls-h4: -1.28px;
  --fs-h5: 36px;   --lh-h5: 1.2;   --ls-h5: -0.72px;
  --fs-h6: 30px;   --lh-h6: 1.3;   --ls-h6: -0.6px;
  --fs-body: 16px; --lh-body: 1.5;
  --fs-lg: 20px;
  --fs-sm: 14px;

  /* ---- Spacing scale (rekolet) ---- */
  --sp-xss: 4px;  --sp-xs: 6px;  --sp-m: 10px;  --sp-l: 12px;
  --sp-xl: 16px;  --sp-2xl: 20px; --sp-3xl: 24px; --sp-4xl: 30px;
  --sp-8xl: 50px; --sp-9xl: 60px; --sp-11xl: 70px; --sp-12xl: 80px; --sp-14xl: 100px;
  --section-pad: 100px;
  --banner-top: 140px;

  /* ---- Layout ---- */
  --container: 1340px;
  --gutter: 66px;            /* horizontal page margin from Figma (px-[66px]) */

  /* ---- Radius ---- */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 20px;  --r-round: 50%;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Webflow breakpoints used throughout:
   >=1280 large desktop · <=991 tablet · <=767 landscape phone · <=479 phone */