/* ==========================================================================
   EVOLVE AI — DESIGN TOKENS (v4: glass · purple · soft geometry)

   A soft purple world. Purple is never one flat value: depth comes from
   several temperatures of it, from near-black violet to almost-white lilac.
   One typeface (Space Grotesk): sharp text against soft shapes.
   ========================================================================== */

:root {
  /* ── Purple, darkest → lightest ──────────────────────────── */
  --ink:        #13072E;   /* near-black violet: headings, dark surfaces */
  --deep:       #22104F;   /* deep violet */
  --royal:      #4520C4;   /* royal purple */
  --electric:   #6A3BFF;   /* electric purple — the brand colour */
  --indigo:     #4B5BFF;   /* electric indigo, for cooler depth */
  --lavender:   #B9A5FF;
  --periwinkle: #AAB6FF;
  --lilac:      #DCD1FF;   /* soft lilac */
  --mist:       #EFEAFF;
  --paper:      #F8F6FF;   /* almost-white lilac: the page */
  --white:      #FFFFFF;
  --cream:      #FFF8EE;   /* warmth, used where the page talks about people */

  /* ── Text ─────────────────────────────────────────────────── */
  --text:       var(--ink);
  --text-2:     #453C66;   /* body */
  --text-3:     #7A7299;   /* metadata */
  --line:       rgba(19, 7, 46, .12);

  --on-dark:    #FFFFFF;
  --on-dark-2:  rgba(255, 255, 255, .74);
  --on-dark-3:  rgba(255, 255, 255, .5);
  --line-dark:  rgba(255, 255, 255, .18);

  /* ── Glass ────────────────────────────────────────────────── */
  --glass-fill:   linear-gradient(140deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .22));
  --glass-edge:   rgba(255, 255, 255, .7);
  --glass-blur:   22px;
  --glass-shadow: 0 30px 70px -34px rgba(34, 16, 79, .45);
  --glass-fill-dark: linear-gradient(140deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .06));
  --glass-edge-dark: rgba(255, 255, 255, .32);

  /* ── Type ─────────────────────────────────────────────────── */
  --font: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;

  --fs-label:   .75rem;                                    /* 12 */
  --fs-small:   .875rem;                                   /* 14 */
  --fs-body:    clamp(1rem, .96rem + .15vw, 1.0625rem);    /* 16 → 17 */
  --fs-lead:    clamp(1.125rem, 1.04rem + .4vw, 1.375rem); /* 18 → 22 */
  --fs-h3:      clamp(1.375rem, 1.2rem + .7vw, 1.875rem);  /* 22 → 30 */
  --fs-h2:      clamp(2.5rem, 1.6rem + 3.6vw, 5rem);       /* 40 → 80 */
  --fs-display: clamp(2.75rem, 1rem + 7vw, 8.5rem);        /* vision lines */
  --fs-mega:    clamp(5.5rem, 1rem + 22vw, 24rem);         /* EVOLVE */

  /* ── Space ────────────────────────────────────────────────── */
  --container: 1240px;
  --gutter:    clamp(20px, 4vw, 56px);
  --section-y: clamp(96px, 11vw, 168px);
  --nav-top:   16px;
  --rise:      16vh;   /* how far the about arch rises into the hero */

  /* ── Shape ────────────────────────────────────────────────── */
  --r-s:  14px;
  --r-m:  28px;
  --r-l:  48px;

  /* ── Motion ───────────────────────────────────────────────── */
  --ease:     cubic-bezier(.22, .8, .24, 1);    /* soft landing */
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
  --spring:   cubic-bezier(.34, 1.4, .5, 1);    /* a little overshoot */
}

@media (max-width: 599px) {
  :root { --rise: 12vh; }
}