/* ==========================================================================
   01 — Design tokens
   Transcribed from the Elementor kit (post ID 6).
   Source of truth: _conversion/02-DESIGN-TOKENS.md
   Nothing outside this file may hardcode a colour or a type size.
   ========================================================================== */

:root {
  /* --- Colour: registered in the Elementor kit --- */
  --c-primary:        #D6A38D;   /* tan/rose accent */
  --c-primary-hover:  #C0927E;
  --c-text:           #333333;
  --c-text-muted:     #888888;
  --c-border:         #E2E2E2;
  --c-black:          #000000;
  --c-white:          #FFFFFF;
  --c-bg-lite:        #F9F6F1;   /* cream section background */

  /* --- Colour: used inline throughout the build, never registered --- */
  --c-navy:           #282745;   /* dark sections */
  --c-navy-card:      #212135;   /* cards inside dark sections */
  --c-navy-deep:      #020033;   /* service sidebar CTA */

  /* --- Derived --- */
  --c-body-bg:        var(--c-white);
  --c-heading:        var(--c-black);
  --c-link:           var(--c-primary);
  --c-link-hover:     var(--c-primary-hover);
  --c-on-dark:        var(--c-white);
  --c-on-dark-muted:  rgba(255, 255, 255, .7);
  --c-rule-on-dark:   rgba(255, 255, 255, .15);
  --c-marquee:        rgba(0, 0, 0, .1);

  /* --- Type --- */
  --ff-base:   "Sofia Sans", sans-serif;
  --ff-accent: "Nyght Serif", Georgia, serif;   /* italic display accent */

  --fw-normal: 400;
  --fw-bold:   700;

  /* Body — identical across all breakpoints in the kit */
  --fs-body: 18px;
  --lh-body: 26px;

  /* Heading scale — desktop. Overridden at ≤1024 and ≤767 below. */
  --fs-h1: 90px;  --lh-h1: 90px;
  --fs-h2: 70px;  --lh-h2: 70px;
  --fs-h3: 38px;  --lh-h3: 44px;
  --fs-h4: 30px;  --lh-h4: 30px;
  --fs-h5: 16px;  --lh-h5: 22px;

  /* --- Layout --- */
  --container-max:   1344px;   /* Elementor `container_width` */
  --container-inner: 96%;      /* the site's inner width; service pages use 97% */
  --container-ratio: .96;      /* same figure, for the max-width calc */
  --widgets-spacing: 20px;     /* Elementor's inter-widget rhythm */

  /* --- Spacing rhythm, observed across the layouts --- */
  --space-section:    120px;
  --space-section-lg: 180px;
  --space-gap-lg:      60px;
  --space-gap:         35px;
  --space-gap-sm:      25px;
  --space-card:        50px;
  --space-card-sm:     40px;

  /* --- Radius --- */
  --radius-pill:  50px;
  --radius-lg:    30px;
  --radius-md:    20px;
  --radius-sm:    10px;

  /* --- Motion --- */
  --ease:            cubic-bezier(.4, 0, .2, 1);
  --dur-fast:        .3s;
  --dur:             .4s;

  /* --- Chrome --- */
  --header-h: 104px;   /* used for scroll-margin on in-page anchors */
  --z-header: 100;
  --z-drawer: 200;
}

/* Tablet — Elementor `viewport_lg` 1025, so the override applies at ≤1024 */
@media (max-width: 1024px) {
  :root {
    --fs-h1: 78px;  --lh-h1: 78px;
    --fs-h2: 52px;  --lh-h2: 52px;
    --fs-h3: 32px;  --lh-h3: 37px;
    /* h4 and h5 do not change in the kit */
    --container-max: 1024px;
    /* Every page's top-level sections drop to 80 at tablet, including the ones
       that are 180 on desktop — verified across all six page JSONs. */
    --space-section: 80px;
    --space-section-lg: 80px;
    --space-gap-lg: 40px;
  }
}

/* Mobile — Elementor `viewport_md` 768, so the override applies at ≤767 */
@media (max-width: 767px) {
  :root {
    --container-inner: 93%;
    --container-ratio: .93;
    --fs-h1: 48px;  --lh-h1: 48px;
    --fs-h2: 40px;  --lh-h2: 40px;
    --fs-h3: 32px;  --lh-h3: 37px;
    --container-max: 767px;
    /* …and to 60 on mobile. */
    --space-section: 60px;
    --space-section-lg: 60px;
    --space-gap-lg: 30px;
    --space-card: 30px;
    --space-card-sm: 24px;
    --header-h: 76px;
  }
}