/* ==========================================================================
   Sebrina Abdellakelil — design tokens
   Extracted from Figma: creative-world, node 2754:3 "Awe & Wonder"
   Reference frame width: 1920px
   Every section of the site pulls from this file. Change a value here and
   it changes everywhere.
   ========================================================================== */

:root {
  /* ---- Color -------------------------------------------------------- */
  --c-magenta:     #FF00D0;
  --c-purple:      #58009A;
  --c-mint:        #ACFFC9;
  --c-offwhite:    #F2F2F2;
  --c-white:       #FFFFFF;

  /* ---- Typeface ------------------------------------------------------ */
  --font: '42dot Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --w-medium:   500;
  --w-bold:     700;
  --w-xbold:    800;

  /* ---- Type scale ----------------------------------------------------
     Fluid. The max value is the size as drawn at 1920px.
     Decimals in the Figma file were rounded to whole pixels.          */
  --fs-display:  clamp(46px, 6.25vw, 120px);  /* hero                   */
  --fs-h2:       clamp(38px, 3.96vw,  76px);  /* step cards, big blocks */
  --fs-h3:       clamp(34px, 3.66vw,  70px);  /* section statements     */
  --fs-name:     clamp(30px, 2.88vw,  55px);  /* footer name            */
  --fs-label:    clamp(22px, 2.30vw,  44px);  /* form labels            */
  --fs-link:     clamp(19px, 1.93vw,  37px);  /* footer links           */
  --fs-body:     clamp(18px, 1.90vw,  36px);  /* paragraphs             */
  --fs-ui:       clamp(15px, 1.68vw,  32px);  /* buttons, chips, fields */
  --fs-ticker:   clamp(11px, 1.25vw,  24px);  /* top ticker             */

  /* ---- Type rules ---------------------------------------------------- */
  --track:        -0.03em;   /* consistent across the whole design */
  --lh-display:   0.92;
  --lh-button:    0.90;
  --lh-ui:        1.03;
  --lh-body:      1.30;

  /* ---- Components ---------------------------------------------------- */
  --btn-w:        clamp(240px, 26.4vw, 507px);
  --btn-h:        clamp(48px,  3.49vw,  67px);
  --chip-h:       clamp(48px,  3.59vw,  69px);
  --field-h:      clamp(48px,  3.59vw,  69px);
  --border:       2px;

  /* ---- Layout -------------------------------------------------------- */
  --page-max:     1920px;
  --gutter:       clamp(20px, 6.25vw, 120px);  /* card inset from Figma  */
  --card-pad:     clamp(24px, 5.90vw, 113px);  /* inner padding of card  */
  --section-y:    clamp(64px, 8.00vw, 154px);

  /* ---- Motion --------------------------------------------------------
     Used by the GSAP layer once sections are locked.                  */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:     0.25s;
  --dur-base:     0.5s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01s;
    --dur-base: 0.01s;
  }
}