/* ============================================================
   VARIABLES
   The single source of truth for colour, type, spacing and motion.
   Change a value here and it updates everywhere on the site.
   ============================================================ */

:root {

  /* --------------------------------------------------------
     COLOUR — the Qu palette. Confirmed.
     Everything downstream references the semantic aliases below,
     never these raw values, so a future palette change is a
     change to this block alone.
     -------------------------------------------------------- */
  --color-navy:       #1E3A5F;
  --color-yellow:     #EDC46A;
  --color-off-white:  #F8F9F0;

  /* Semantic aliases — components use THESE, never the raw names above.
     That way "what colour is the background" is answered in one place. */
  --color-bg:         var(--color-off-white);
  --color-text:       var(--color-navy);
  --color-accent:     var(--color-yellow);
  --color-link:       var(--color-navy);
  --color-link-hover: var(--color-yellow);
  --color-focus:      var(--color-navy);

  /* --------------------------------------------------------
     TYPE SCALE
     Fluid sizes: they interpolate between the min (mobile) and
     max (desktop) values, so there are no jarring breakpoint jumps.
     clamp(min, preferred, max)
     -------------------------------------------------------- */
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --text-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 1rem);      /* 14 → 16px  */
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);  /* 16 → 18px  */
  --text-lg:   clamp(1.125rem, 1.05rem + 0.4vw,  1.375rem);  /* 18 → 22px  */
  --text-xl:   clamp(1.5rem,   1.3rem + 1vw,     2.25rem);   /* 24 → 36px  */
  --text-2xl:  clamp(2rem,     1.6rem + 2vw,     3.5rem);    /* 32 → 56px  */
  --text-3xl:  clamp(2.5rem,   1.9rem + 3vw,     5rem);      /* 40 → 80px  */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  --leading-tight: 1.1;   /* headlines */
  --leading-snug:  1.3;
  --leading-body:  1.6;   /* paragraphs — comfortable reading */

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;

  /* --------------------------------------------------------
     SPACING
     A consistent rhythm. Use these instead of arbitrary pixels.
     -------------------------------------------------------- */
  --space-xs:  0.5rem;   /*  8px */
  --space-sm:  1rem;     /* 16px */
  --space-md:  1.5rem;   /* 24px */
  --space-lg:  2.5rem;   /* 40px */
  --space-xl:  4rem;     /* 64px */
  --space-2xl: 6rem;     /* 96px */

  /* Page gutter — breathing room at the screen edge, grows on bigger screens */
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* Max width of a readable text column */
  --measure: 42rem;

  /* --------------------------------------------------------
     MOTION  ← ALL ANIMATION TIMING LIVES HERE
     Edit these to retune the feel of the whole site.
     Durations are in seconds (GSAP's unit).
     -------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);   /* CSS transitions */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast:   0.2s;   /* hovers, small state changes */
  --duration-medium: 0.4s;
  --duration-slow:   0.8s;

  /* --------------------------------------------------------
     LAYERING
     Named z-index steps stop the "z-index: 9999" arms race.
     -------------------------------------------------------- */
  --z-base:    1;
  --z-overlay: 10;
  --z-modal:   100;
}