/* =========================================================
  TOKENS — single source of truth
========================================================= */
:root{
  --font-sans: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* --- TYPOGRAPHY SCALE (Fluid: 375px -> 1440px) --- */
  /* Uses clamp() to interpolate size between mobile and desktop */
  --fs-xs:  clamp(0.75rem,  0.70rem + 0.25vw,  0.875rem); /* 12px -> 14px */
  --fs-sm:  clamp(0.875rem, 0.80rem + 0.37vw,  1.00rem);  /* 14px -> 16px */
  --fs-base: clamp(1.00rem,  0.95rem + 0.25vw,  1.125rem); /* 16px -> 18px */
  --fs-lg:  clamp(1.125rem, 1.05rem + 0.37vw,  1.35rem);  /* 18px -> 21.6px */
  --fs-xl:  clamp(1.35rem,  1.20rem + 0.75vw,  1.75rem);  /* 21.6px -> 28px */
  --fs-2xl: clamp(1.75rem,  1.50rem + 1.25vw,  2.50rem);  /* 28px -> 40px */
  --fs-3xl: clamp(2.25rem,  1.80rem + 2.25vw,  3.50rem);  /* 36px -> 56px */
  --fs-4xl: clamp(2.75rem,  2.20rem + 2.75vw,  4.50rem);  /* 44px -> 72px */
  --fs-5xl: clamp(3.25rem,  2.50rem + 3.75vw,  6.00rem);  /* 52px -> 96px */

  /* --- LINE HEIGHT & MEASURE --- */
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-base: 1.6;
  --lh-relaxed: 1.75;

  --measure-narrow: 45ch; /* For lead text / captions */
  --measure-base: 65ch;   /* Optimal reading length */
  --measure-wide: 75ch;   /* For larger displays if needed */

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;

  --r-xs: .5rem;
  --r-sm: .75rem;
  --r-md: 1rem;
  --r-lg: 1.25rem;
  --r-xl: 1.75rem;

  --b-soft: rgba(255,255,255,.12);
  --b-softer: rgba(255,255,255,.08);
  --glass-bg: rgba(20, 22, 26, .80);
  --glass-blur: 12px;
  --shadow-soft: 0 10px 40px rgba(0,0,0,.35);

  --wrap-x: 20px;

  --head-minh: 76px;
  --head-inset: 18px;
  --head-px: var(--head-inset);
  --head-py: var(--head-inset);

  --icon-size: 44px;
  --logo-h: 32px;
  --logo-h-sm: 28px;
  --logo-h-lg: 34px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --dur: 260ms;
  --transition-base: 260ms var(--ease);

  --accent: #4f6cff;
  --accent-lavender: #9d96ef;

  --pastel-lilac: #8f8ad6;
  --pastel-blue:  #7fa6d9;
  --pastel-mint:  #6fbfa3;
  --pastel-teal:  #6aa9b8;
  --pastel-rose:  #c48a9a;
  --pastel-sand:  #c6bea6;

  --bg-page: #0b1020;
  --ink: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.65);
  --lavender: #9d96ef;

  --panel-radius: 18px;
  --panel-gap: clamp(18px, 3vw, 34px);

  --pricing-accent: #7CB7A0;
  --pricing-border: rgba(255,255,255,.12);
  --pricing-bg: rgba(255,255,255,.05);
  --pricing-bg-inner: rgba(255,255,255,.03);
  --pricing-shadow: 0 15px 35px rgba(0,0,0,.40);
  --pricing-shadow-hover: 0 25px 50px rgba(0,0,0,.60);
}

/* wrapper margin strategy */
@media (min-width: 768px){
  :root{ --wrap-x: clamp(20px, 6vw, 110px); }
}
@media (min-width: 992px){
  :root{
    --wrap-x: clamp(28px, 4vw, 140px);
    --logo-h: var(--logo-h-lg);
  }
}
@media (min-width: 1200px){
  :root{ --wrap-x: clamp(36px, 5vw, 160px); }
}
@media (min-width: 1400px){
  :root{ --wrap-x: clamp(40px, 6vw, 180px); }
}