/* ==========================================================================
   Design tokens
   Values lifted from the reference stylesheet. Every other file consumes
   these — no raw hex outside this file except inside gradients.
   ========================================================================== */

:root {
  /* ---- Colour ---------------------------------------------------------- */
  --c-bg:              #ffffff;
  --c-fg:              #141414; /* hsl(0 0% 8%)  */
  --c-fg-soft:         #1f1f1f; /* hsl(0 0% 12%) */
  --c-muted:           #808080; /* hsl(0 0% 50%) */
  --c-border:          #e5e5e5; /* hsl(0 0% 90%) */
  --c-border-soft:     #f0f0f0;
  --c-light:           #f5f5f5; /* hsl(0 0% 96%) */
  --c-beige:           #f4f3f0;
  --c-neutral-100:     #f5f5f5;
  --c-dark:            #141414;
  --c-darker:          #0a0a0a;
  --c-footer:          #171717;

  --c-primary:         #4a5fc1; /* hsl(228 53% 55%) */
  --c-primary-dark:    #3245b6; /* hsl(228 58% 45%) */
  --c-primary-fg:      #ffffff;
  --c-navy:            #1a2566;

  --c-on-dark:         #fafafa;
  --c-on-dark-muted:   rgba(255, 255, 255, .55);

  /* ---- Typography ------------------------------------------------------ */
  --font-sans:
    "Structra Sans", "Helvetica Neue", Helvetica,
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;

  /* Fluid display sizes — the reference drives its hero from vw units.     */
  --fs-hero:     clamp(2.6rem, 11vw, 3.4rem);
  --fs-display:  clamp(2rem,  5.2vw, 3.5rem);
  --fs-h2:       clamp(1.875rem, 3.4vw, 3rem);
  --fs-h3:       clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-lead:     clamp(1rem, 1.2vw, 1.125rem);
  --fs-body:     1rem;
  --fs-small:    .875rem;
  --fs-eyebrow:  .6875rem;

  --lh-display:  .95;
  --lh-heading:  1.1;
  --lh-body:     1.65;

  --ls-display:  -.03em;
  --ls-heading:  -.02em;
  --ls-eyebrow:  .2em;

  /* ---- Space & shape --------------------------------------------------- */
  --container:      1400px;
  --container-wide: 1920px;
  --gutter:         1rem;
  --gutter-lg:      2.5%;

  --section-y:      4.5rem;
  --section-y-lg:   9rem;

  --radius:         .75rem;
  --radius-sm:      .5rem;
  --radius-lg:      1.5rem;
  --radius-pill:    999px;

  --header-h:       5.5rem;

  /* ---- Motion ---------------------------------------------------------- */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur-fast:  .3s;
  --dur:       .5s;
  --dur-slow:  .7s;

  /* ---- Elevation ------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow:    0 10px 30px rgba(0, 0, 0, .08);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .14);
}

@media (min-width: 768px) {
  :root {
    --gutter:    var(--gutter-lg);
    --section-y: var(--section-y-lg);
    --fs-hero:   clamp(3.4rem, 5.9vw, 6rem);
    --header-h:  7rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-hero: clamp(4rem, 5vw, 7rem);
  }
}