/* 

    CSS Variables for Arbor.eco

*/

:root {
  /* Primary Palette */
  --primary-98L: #f6fefc;
  --primary-95L: #e9fcf8;
  --primary-90L: #d2f9f1;
  --primary-80L: #a5f3e4;
  --primary-70L: #78edd6;
  --primary-60L: #4ce6c8;
  --primary-50L: #1fe0bb;
  --primary-40L: #19b395;
  --primary-30L: #128770;
  --primary-23L: #0e6655;
  --primary-15L: #094338;
  --primary-10L: #062d25;
  --primary-5L: #031613;
  --primary-3L: #020b09;

  /* Secondary Palette */
  --secondary-99L: #fefdfb;
  --secondary-98L: #fefaf6;
  --secondary-97L: #fdf8f2;
  --secondary-95L: #fcf3e9;
  --secondary-86L: #f6ddc1;
  --secondary-80L: #f2cea6;
  --secondary-70L: #ecb679;
  --secondary-60L: #e59d4d;
  --secondary-50L: #df8520;
  --secondary-40L: #b26a1a;
  --secondary-30L: #865013;
  --secondary-20L: #59350d;
  --secondary-10L: #2d1b06;
  --secondary-5L: #160d03;
  --secondary-3L: #0d0802;

  /* Shades Palette */
  --shades-99L: #fcfdfd;
  --shades-98L: #f9fafa;
  --shades-97L: #f7f8f8;
  --shades-95L: #f1f4f3;
  --shades-90L: #e3e8e7;
  --shades-80L: #c7d1cf;
  --shades-70L: #abbab7;
  --shades-60L: #8fa39f;
  --shades-50L: #738c87;
  --shades-40L: #5c706c;
  --shades-30L: #455451;
  --shades-20L: #2e3836;
  --shades-10L: #171c1b;
  --shades-5L: #0b0e0e;
  --shades-3L: #070808;

  /* Data Visualization - 1 Color Palette */
  --visual-1-1: var(--primary-15L);

  /* Data Visualization - 2 Colors Palette */
  --visual-2-1: var(--primary-15L);
  --visual-2-2: var(--primary-40L);

  /* Data Visualization - 3 Colors Palette */
  --visual-3-1: var(--primary-15L);
  --visual-3-2: var(--primary-40L);
  --visual-3-3: var(--secondary-86L);

  /* Data Visualization - 4 Colors Palette */
  --visual-4-1: var(--primary-15L);
  --visual-4-2: var(--primary-23L);
  --visual-4-3: var(--primary-40L);
  --visual-4-4: var(--secondary-86L);

  /* Data Visualization - 5 Colors Palette */
  --visual-5-1: var(--primary-15L);
  --visual-5-2: var(--primary-23L);
  --visual-5-3: var(--primary-40L);
  --visual-5-4: var(--shades-80L);
  --visual-5-5: var(--secondary-86L);

  /* Data Visualization - 6 Colors Palette */
  --visual-6-1: var(--primary-15L);
  --visual-6-2: var(--primary-23L);
  --visual-6-3: var(--primary-40L);
  --visual-6-4: var(--shades-80L);
  --visual-6-5: var(--secondary-86L);
  --visual-6-6: var(--secondary-70L);

  /* Data Visualization - 7 Colors Palette */
  --visual-7-1: var(--primary-15L);
  --visual-7-2: var(--primary-23L);
  --visual-7-3: var(--primary-40L);
  --visual-7-4: var(--shades-80L);
  --visual-7-5: var(--secondary-86L);
  --visual-7-6: var(--secondary-70L);
  --visual-7-7: #ba7b5e;

  /* Data Visualization - 8 Colors Palette */
  --visual-8-1: var(--primary-15L);
  --visual-8-2: var(--primary-23L);
  --visual-8-3: var(--primary-40L);
  --visual-8-4: var(--primary-80L);
  --visual-8-5: var(--shades-80L);
  --visual-8-6: var(--secondary-86L);
  --visual-8-7: var(--secondary-70L);
  --visual-8-8: #ba7b5e;

  /* Data Visualization - 9 Colors Palette */
  --visual-9-1: var(--primary-15L);
  --visual-9-2: var(--primary-23L);
  --visual-9-3: var(--primary-40L);
  --visual-9-4: var(--primary-80L);
  --visual-9-5: var(--shades-80L);
  --visual-9-6: var(--secondary-95L);
  --visual-9-7: var(--secondary-86L);
  --visual-9-8: var(--secondary-70L);
  --visual-9-9: #ba7b5e;

  /* Data Visualization - 10 Colors Palette */
  --visual-10-1: var(--primary-15L);
  --visual-10-2: var(--primary-23L);
  --visual-10-3: var(--primary-40L);
  --visual-10-4: var(--primary-80L);
  --visual-10-5: var(--shades-80L);
  --visual-10-6: var(--secondary-95L);
  --visual-10-7: var(--secondary-86L);
  --visual-10-8: var(--secondary-70L);
  --visual-10-9: #ba7b5e;
  --visual-10-10: var(--shades-40L);

  /* Data Visualization - 11 Colors Palette */
  --visual-11-1: var(--primary-15L);
  --visual-11-2: var(--primary-23L);
  --visual-11-3: var(--primary-40L);
  --visual-11-4: var(--primary-80L);
  --visual-11-5: var(--shades-80L);
  --visual-11-6: var(--secondary-95L);
  --visual-11-7: var(--secondary-86L);
  --visual-11-8: var(--secondary-70L);
  --visual-11-9: #ba7b5e;
  --visual-11-10: var(--shades-40L);
  --visual-11-11: var(--shades-20L);

  /* Data Visualization - 12 Colors Palette */
  --visual-12-1: var(--primary-15L);
  --visual-12-2: var(--primary-23L);
  --visual-12-3: var(--primary-40L);
  --visual-12-4: var(--primary-80L);
  --visual-12-5: var(--shades-80L);
  --visual-12-6: var(--secondary-95L);
  --visual-12-7: var(--secondary-86L);
  --visual-12-8: var(--secondary-70L);
  --visual-12-9: #ba7b5e;
  --visual-12-10: var(--shades-40L);
  --visual-12-11: var(--shades-20L);
  --visual-12-12: var(--shades-5L);

  /* Font Family */
  --font-family: "Manrope", sans-serif;

  /* Font Sizes */
  --font-size-display-xxl: 72px;
  --font-size-display-xl: 60px;
  --font-size-display-l: 48px;
  --font-size-display-m: 36px;
  --font-size-display-s: 30px;
  --font-size-display-xs: 24px;
  --font-size-text-xxl: 22px;
  --font-size-text-xl: 20px;
  --font-size-text-l: 18px;
  --font-size-text-m: 16px;
  --font-size-text-s: 14px;
  --font-size-text-xs: 12px;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-variable: 450;
  --font-weight-medium: 500;

  /* Line Heights */
  --line-height-display-xxl: 125%;
  --line-height-display-xl: 130%;
  --line-height-display-l: 135%;
  --line-height-display-m: 138%;
  --line-height-display-s: 140%;
  --line-height-display-xs: 140%;
  --line-height-text-xxl: 135%;
  --line-height-text-xl: 150%;
  --line-height-text-l: 150%;
  --line-height-text-m: 150%;
  --line-height-text-s: 155%;
  --line-height-text-xs: 160%;

  /* Button Text Sizes with Medium Weight */
  --button-text-xxl-size: var(--font-size-text-xxl);
  --button-text-l-size: var(--font-size-text-l);
  --button-text-m-size: var(--font-size-text-m);
  --button-text-s-size: var(--font-size-text-s);
  --button-text-xs-size: var(--font-size-text-xs);
  --button-text-weight: var(--font-weight-medium);
}

/* Class for Display XXL */
.display-xxl {
  font-family: var(--font-family);
  font-size: var(--font-size-display-xxl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-display-xxl);
}

/* Class for Display XL */
.display-xl {
  font-family: var(--font-family);
  font-size: var(--font-size-display-xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-display-xl);
}

/* Class for Display L */
.display-l {
  font-family: var(--font-family);
  font-size: var(--font-size-display-l);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-display-l);
}

/* Class for Display M */
.display-m {
  font-family: var(--font-family);
  font-size: var(--font-size-display-m);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-display-m);
}

/* Class for Display S */
.display-s {
  font-family: var(--font-family);
  font-size: var(--font-size-display-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-display-s);
}

/* Class for Display XS */
.display-xs {
  font-family: var(--font-family);
  font-size: var(--font-size-display-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-display-xs);
}

/* Class for Text XXL */
.text-xxl {
  font-family: var(--font-family);
  font-size: var(--font-size-text-xxl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-xxl);
}

/* Class for Text XL */
.text-xl {
  font-family: var(--font-family);
  font-size: var(--font-size-text-xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-xl);
}

/* Class for Text L */
.text-l {
  font-family: var(--font-family);
  font-size: var(--font-size-text-l);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-l);
}

/* Class for Text M */
.text-m {
  font-family: var(--font-family);
  font-size: var(--font-size-text-m);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-m);
}

/* Class for Text S */
.text-s {
  font-family: var(--font-family);
  font-size: var(--font-size-text-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-s);
}

/* Class for Text XS */
.text-xs {
  font-family: var(--font-family);
  font-size: var(--font-size-text-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-xs);
}

/* Button Text Classes with Medium Weight */
.button-text-xxl {
  font-family: var(--font-family);
  font-size: var(--button-text-xxl-size);
  font-weight: var(--button-text-weight);
}

.button-text-l {
  font-family: var(--font-family);
  font-size: var(--button-text-l-size);
  font-weight: var(--button-text-weight);
}

.button-text-m {
  font-family: var(--font-family);
  font-size: var(--button-text-m-size);
  font-weight: var(--button-text-weight);
}

.button-text-s {
  font-family: var(--font-family);
  font-size: var(--button-text-s-size);
  font-weight: var(--button-text-weight);
}

.button-text-xs {
  font-family: var(--font-family);
  font-size: var(--button-text-xs-size);
  font-weight: var(--button-text-weight);
}