:root {

    /* ─── Colors ─── */
    --color-1: #F4F2EC;
    --color-2: #D1E2FD;
    --color-3: #6175E5;
    --color-4: #2727CB;
    --color-button: #88A6E7;
    --color-button-hover: #2A5DCB;
  
    /* ─── Typography ─── */
    --font-heading: 'Playfair Display';
    --font-body: 'Source Sans 3';
  
    --font-size-h1: 4.2vw; /* 85 */
    --font-size-h2: 2.7vw;  /* 53 */
    --font-size-h3: 7.16vw; /* 137.5 */
    --font-size-body: 1.45vw;  /* 28 */
    --font-size-nav: 1.04vw;   /* 20 */
    --font-size-h4: 1.67vw;   /* 32 */
  
    --mobile-font-size-h1: 18.60vw; /* 80 */
    --mobile-font-size-h2: 21.32vw;  /* 53 */
    --mobile-font-size-h3: 31.97vw; /* 137.5 */
    --mobile-font-size-body: 6.04vw;  /* 26 */
    --mobile-font-size-nav: 4.65vw;   /* 20 */
    --mobile-font-size-h4: 7.44vw;   /* 32 */
    --mobile-font-size-nav1: 3.72vw; /* 16 */

    --font-weight-bold: 700;
    --font-weight-regular: 400;
  
    --line-height-heading: 1.2;
    --line-height-body: 1.6;
  
   /* ─── Spacing ─── */
   --space-xs:  4px;
   --space-sm:  8px;
   --space-md:  16px;
   --space-lg:  32px;
   --space-xl:  64px;
 
   /* ─── project specific ─── */
   --space-page: 3.4%;
   --space-top:  2.2%;

   /* --- fixed spacing --- */
   --space-top-fixed: 42px;
   --space-gap:  24px;
   --space-nav:  4vw;/*78px;*/
   
   /* --- mobile spacing --- */
   --space-top-mobile: 4.65%; /*20*/
   --space-page-mobile: 6.04%; /*26*/


   /* ─── Border Radius ─── */
   --radius-sm:  4px;
   --radius-md:  8px;
   --radius-lg:  16px;
  
  }