/* ============================================================
   Visuala Studio — Spacing, Radii, Shadows, Motion
   8px-based rhythm. Generous editorial whitespace.
   ============================================================ */

:root {
  /* ---- Spacing scale (8px rhythm, half-step at the base) -- */
  --space-1:  0.25rem;  /*   4px */
  --space-2:  0.5rem;   /*   8px */
  --space-3:  0.75rem;  /*  12px */
  --space-4:  1rem;     /*  16px */
  --space-5:  1.5rem;   /*  24px */
  --space-6:  2rem;     /*  32px */
  --space-7:  3rem;     /*  48px */
  --space-8:  4rem;     /*  64px */
  --space-9:  6rem;     /*  96px */
  --space-10: 8rem;     /* 128px */

  /* Section rhythm + page gutter + max content width.
     --section-y is the vertical padding applied top & bottom of every
     section, so the gap BETWEEN two stacked sections is 2 × --section-y.
     Mobile sits at the clamp floor (4.5rem / 72px). The desktop override
     below (@media ≥768px) tightens this to a flat ~6rem so the page
     flows as one continuous editorial column without feeling cramped.
     Change the rhythm in ONE place — every section inherits it. */
  --section-y:   clamp(4.5rem, 3rem + 6vw, 9rem);
  --page-gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
  /* All sections in the prototype render at 1320px max-width — keep that
     value canonical so .wrap matches every section without per-section
     overrides. The DESIGN_SYSTEM doc documents 1280; the rendered kit
     uses 1320. The kit wins.
     2026-06-21: bumped to 1440 for extra horizontal breath (nav + sections). */
  --content-max: 1440px;

  /* Unified gap between sibling cards (carousels, case grids, the
     differentiator grid, testimonials). One token so every card group on
     the page breathes with the SAME rhythm. */
  --gap-cards: 18px;

  /* Unified gap between the section header (eyebrow + headline + lead)
     and the section body content (carousel, grid, list, card). Replaces
     the per-section margin-top hardcoded values (was 40 / 44 / 48 /
     clamp(36,…,56)px scattered across services / cases / testimonials /
     differentiators / faq). At ~66% of --section-y's desktop max it
     creates a deliberate rest beat between intro copy and the cards. */
  --space-head-end: clamp(56px, 4.5vw, 96px);

  /* ---- Radii -------------------------------------------- */
  /* Large surfaces (cards, banners, hero/testimonial media, the booking
     form, statement image tokens) are all unified on ONE canonical value
     via --radius-surface for a crisp, mature, editorial look. */
  --radius-surface: 12px;            /* canonical card / banner / media corner */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   var(--radius-surface);
  --radius-xl:   var(--radius-surface);
  --radius-card: var(--radius-surface);   /* default card corner */
  --radius-2xl:  var(--radius-surface);    /* large feature cards / media / banners */
  --radius-pill: 999px;

  /* ---- Backdrop filters --------------------------------- */
  /* Reusable backdrop-filter recipes. --chip-blur powers the
     frosted-glass chips that float over imagery (services
     carousel, cases banner, testimonial card). Colour tints
     live in colors.css (--chip-glass-fill / --chip-glass-border). */
  --chip-blur: blur(12px) saturate(1.1);

  /* ---- Media-overlay chip inset ------------------------- */
  /* Distance from the corner of a service-carousel card to the
     floating chip layer. Off the 8px scale on purpose — optically
     tuned. Cases banners use --space-4 (16px) directly, kept
     distinct because that section has a different card geometry. */
  --chip-inset:        18px;
  --chip-inset-mobile: 14px;

  /* ---- Shadows ------------------------------------------ */
  /* Soft, warm, low-contrast — editorial, never harsh. */
  --shadow-xs: 0 1px 2px rgba(29, 33, 37, 0.05);
  --shadow-sm: 0 2px 8px rgba(29, 33, 37, 0.06);
  --shadow-md: 0 8px 24px rgba(29, 33, 37, 0.08);
  --shadow-lg: 0 20px 48px rgba(29, 33, 37, 0.12);
  --shadow-xl: 0 32px 72px rgba(29, 33, 37, 0.16);

  /* ---- Motion ------------------------------------------- */
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:    cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    180ms;
  --dur-base:    300ms;
  --dur-slow:    450ms;
}

/* ============================================================
   DESKTOP SECTION RHYTHM
   On phones --section-y stays at the clamp floor (mobile is
   untouched). From the desktop breakpoint up we replace the
   steeply-climbing fluid value with a tighter, near-flat rhythm:
   ~6rem (96px) per side → ~192px between sections instead of the
   previous ~288px.
   ============================================================ */
@media (min-width: 768px) {
  :root {
    --section-y: clamp(6rem, 4.25rem + 1.6vw, 7.25rem);
  }
}