/* =================================================================== */
/* PAGE:      VARIABLES SETTINGS                                       */
/* FILE:      variables.css                                            */
/* =================================================================== */

/* =================================================================== */
/* TABLE OF CONTENTS                                      */
/* 1.0 FONT IMPORTS                                       */
/* 1.1 Google Fonts (Barlow)                              */
/* 1.2 Local Fonts (Grift)                                */
/* 2.0 :root                                              */
/* 2.1 Color Variables                                    */
/* 2.2 Brand Assignments                                  */
/* 2.3 Typography Engine                                  */
/* 2.4 Spacing & Containers                               */
/* 3.0 FLUID SIZING FONT OVERRIDES                        */
/* 4.0 DISPLAY UTILITIES (D-Scale)                        */
/* 5.0 SEMANTIC HEADINGS (H-Scale)                        */
/* 6.0 BODY & TEXT                                        */
/* =================================================================== */

/* ------------------  1.0 FONT IMPORTS  ------------------  */

/* 1.2 Local Fonts (Grift, Barlow, & Barlow Condensed) */
/* ------------------  1.0 FONT IMPORTS  ------------------  */

/* 1.1 Barlow */
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
}

/* 1.2 Barlow Condensed */
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
}

/* 1.3 Local Fonts (Grift) */
@font-face {
  font-family: "Grift";
  src: url("/fonts/Grift-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Grift";
  src: url("/fonts/Grift-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Grift";
  src: url("/fonts/Grift-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Grift";
  src: url("/fonts/Grift-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Grift";
  src: url("/fonts/Grift-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Grift";
  src: url("/fonts/Grift-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Grift";
  src: url("/fonts/Grift-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Grift";
  src: url("/fonts/Grift-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}
/* ------------------  2.0 :root  ------------------  */
:root {
  /* ------------------ 2.1: Color Variables ------------------ */
  --Neutral-Gray-100: #fbfbfb;
  --Neutral-Gray-200: #ededed;
  --Neutral-Gray-300: #d0d0d0;
  --Neutral-Gray-400: #b6b6b6;
  --Neutral-Gray-500: #9b9b9b;
  --Neutral-Gray-600: #747474;
  --Neutral-Gray-700: #5e5e5e;
  --Neutral-Gray-800: #505050;
  --Neutral-Gray-900: #393939;
  --Neutral-Gray-1000: #242424;

  --Orangey-Red-100: #fdfaf9;
  --Orangey-Red-200: #f8eae6;
  --Orangey-Red-300: #edc8bd;
  --Orangey-Red-400: #e2a997;
  --Orangey-Red-500: #d6876d;
  --Orangey-Red-600: #c3502b;
  --Orangey-Red-700: #9e4123;
  --Orangey-Red-800: #87371e;
  --Orangey-Red-900: #612815;
  --Orangey-Red-1000: #2c1008;

  --Cantelope-100: #fefbf6;
  --Cantelope-200: #faedd8;
  --Cantelope-300: #f0cb8e;
  --Cantelope-400: #e7ab49;
  --Cantelope-500: #c5923e;
  --Cantelope-600: #946d2f;
  --Cantelope-700: #785826;
  --Cantelope-800: #664b20;
  --Cantelope-900: #493617;
  --Cantelope-1000: #2e220f;

  --Forest-Green-100: #fafcfb;
  --Forest-Green-200: #e6efec;
  --Forest-Green-300: #bfd6cd;
  --Forest-Green-400: #9abeb0;
  --Forest-Green-500: #73a591;
  --Forest-Green-600: #3b8065;
  --Forest-Green-700: #306852;
  --Forest-Green-800: #285945;
  --Forest-Green-900: #1d4032;
  --Forest-Green-1000: #132820;

  --Teal-100: #f9fcfc;
  --Teal-200: #e3f0f1;
  --Teal-300: #b4d7da;
  --Teal-400: #87bfc3;
  --Teal-500: #59a7ac;
  --Teal-600: #307f85;
  --Teal-700: #27676c;
  --Teal-800: #21575c;
  --Teal-900: #173e41;
  --Teal-1000: #0f2729;

  --Navy-Blue-100: #fbfbfd;
  --Navy-Blue-200: #eceef6;
  --Navy-Blue-300: #ccd0e6;
  --Navy-Blue-400: #adb4d6;
  --Navy-Blue-500: #8f99c8;
  --Navy-Blue-600: #6370b2;
  --Navy-Blue-700: #4959a5;
  --Navy-Blue-800: #38499c;
  --Navy-Blue-900: #283470;
  --Navy-Blue-1000: #192147;

  --Neutral-Indigo-100: #fbfbfc;
  --Neutral-Indigo-200: #ecedf1;
  --Neutral-Indigo-300: #ced0da;
  --Neutral-Indigo-400: #b2b5c5;
  --Neutral-Indigo-500: #969aaf;
  --Neutral-Indigo-600: #6d7391;
  --Neutral-Indigo-700: #565c7f;
  --Neutral-Indigo-800: #474e73;
  --Neutral-Indigo-900: #323752;
  --Neutral-Indigo-1000: #202335;

  --Plum-100: #fcfbfd;
  --Plum-200: #f0edf6;
  --Plum-300: #d5cce5;
  --Plum-400: #beafd6;
  --Plum-500: #a592c7;
  --Plum-600: #8266b1;
  --Plum-700: #6d4da3;
  --Plum-800: #5f3c9b;
  --Plum-900: #442b6e;
  --Plum-1000: #2b1b47;

  --Magenta-100: #fdfafd;
  --Magenta-200: #f7ebf7;
  --Magenta-300: #e8c6e9;
  --Magenta-400: #dba4dc;
  --Magenta-500: #cc80ce;
  --Magenta-600: #b545b7;
  --Magenta-700: #933895;
  --Magenta-800: #7d307f;
  --Magenta-900: #5a225b;
  --Magenta-1000: #39163a;

  /* ------------------ 2.2: Brand Assignments ------------------ */
  --Primary-Neutral-Gray: #393939; /*  --Neutral-Gray-900 */
  --Primary-Teal: #27676c; /*  --Teal-700 */
  --Primary-Forest-Green: #306852; /*  --Forest-Green-700 */
  --Primary-Orangey-Red: #c3502b; /*  --Orangey-Red-600 */
  --Primary-Cantelope: #e7ab49; /*  --Cantelope-400 */
  --Primary-Navy-Blue: #38499c; /*  --Navy-Blue-800 */
  --Primary-Neutral-Indigo: #323752; /*  --Neutral-Indigo-900 */
  --Primary-Plum: #5f3c9b; /*  --Plum-800 */
  --Primary-Magenta: #933895; /*  --Magenta-700 */

  /* ------------------ 2.3: Typography Engine ------------------ */
  --font-primary: "Grift", sans-serif;
  --font-secondary: "Barlow", sans-serif;
  --font-tertiary: "Barlow Condensed", sans-serif;
  --font-color-heading: var(--Neutral-Indigo-100);
  --font-color-body: var(--Navy-Blue-1000);

  /* 2.3.1: Display Scale (Exact Precision) */
  /* Targets ~349px | ~279px | ~223px | ~178px | ~143px | ~114px */
  --fs-d1: 16.977234rem;
  --fs-d2: 13.581788rem;
  --fs-d3: 10.86543rem;
  --fs-d4: 8.692344rem;
  --fs-d5: 6.953875rem;
  --fs-d6: 5.5631rem;

  /* 2.3.2: Headline Scale (Exact Precision) */
  /* Headline Scale (Targets ~91px | ~73px | ~58px | ~46px | ~37px | ~30px) */
  --fs-h1: 4.45048rem;
  --fs-h2: 3.560384rem;
  --fs-h3: 2.848307rem;
  --fs-h4: 2.278646rem;
  --fs-h5: 1.822917rem;
  --fs-h6: 1.458333rem;

  /* 2.3.3: UI Scale */
  --fs-body: 1.166667rem;
  --fs-caption: 0.933333rem;
  --fs-small-print: 0.746667rem;
  --base-size: 12px;

  /* ------------------ 2.4: Spacing & Containers ------------------ */
  /* LEGEND: Based on 1rem = 12px anchor */
  --space-10: 0.66rem; /* 8px */
  --space-20: 1.33rem; /* 16px */
  --space-30: 2rem; /* 24px */
  --space-38: 2.5rem; /* 30px */
  --space-40: 2.66rem; /* 32px */
  --space-50: 3.3333333333rem; /* 40px */
  --space-53: 3.5rem; /* 42px */
  --space-80: 5.33rem; /* 64px */
  --space-100: 6.66rem; /* 80px (80 * 1.25 = 100) */
  --space-125: 8.3333333333rem; /* 100px (100 * 1.25 = 125) */
  --space-188: 12.5rem; /* 150px (150 * 1.25 = 188) */

  /* -------------------------------------------------------------------------- */
  /* 2.4.2: CONTAINER SCALE (Logic: px * 1.25 = Token Name)                     */
  /* -------------------------------------------------------------------------- */
  --container-325: 21.666667rem; /* 260px  (260 * 1.25)  */
  --container-350: 23.333333rem; /* 280px  (280 * 1.25)  */
  --container-575: 38.333333333rem; /* 460px  (460 * 1.25)  */
  --container-588: 39.166666667rem; /* 470px  (470 * 1.25)  */
  --container-620: 41.333333rem; /* 496px  (496 * 1.25)  */
  --container-713: 47.5rem; /* 570px  (570 * 1.25)  */
  --container-750: 50rem; /* 600px  (600 * 1.25)  */
  --container-800: 53.333333rem; /* 640px  (640 * 1.25)  */
  --container-840: 56rem; /* 672px  (672 * 1.25)  */
  --container-934: 62rem; /* 747px  (747 * 1.25)  */
  --container-1000: 66.666666667rem; /* 800px  (800 * 1.25)  */
  --container-1125: 75rem; /* 900px  (900 * 1.25)  */
  --container-1300: 86.666667rem; /* 1040px (1040 * 1.25) */
  --container-1531: 102.083333rem; /* 1225px (1225 * 1.25) */
  --container-1738: 115.833333333rem; /* 1390px (1390 * 1.25) */
  --container-1900: 126.666667rem; /* 1520px (1520 * 1.25) */
  --container-2100: 140rem; /* 1680px (1680 * 1.25) */
  --container-2200: 146.666667rem; /* 1760px (1760 * 1.25) */
}

/* ------------------  3.0 FLUID SIZING FONT OVERRIDES  ------------------  */
html {
  font-size: 12px;
}
@media (min-width: 768px) {
  :root {
    --fs-d1: 21.827873rem;
    --fs-d2: 17.4623rem;
    --fs-d3: 13.969839rem;
    --fs-d4: 11.175871rem;
    --fs-d5: 8.940697rem;
    --fs-d6: 7.152557rem;

    --fs-h1: 5.722046rem;
    --fs-h2: 4.577637rem;
    --fs-h3: 3.662109rem;
    --fs-h4: 2.929688rem;
    --fs-h5: 2.34375rem;
    --fs-h6: 1.875rem;

    --fs-body: 1.5rem;
    --fs-caption: 1.2rem;
    --fs-small-print: 0.96rem;
  }
}
@media (min-width: 1200px) {
  :root {
    /* Display Scale */
    --fs-d1: 26.678511rem;
    --fs-d2: 21.342809rem;
    --fs-d3: 17.074247rem;
    --fs-d4: 13.659398rem;
    --fs-d5: 10.927518rem;
    --fs-d6: 8.742015rem;

    /* Headline Scale */
    --fs-h1: 6.993612rem;
    --fs-h2: 5.594889rem;
    --fs-h3: 4.475911rem;
    --fs-h4: 3.580729rem;
    --fs-h5: 2.864583rem;
    --fs-h6: 2.291667rem;

    /* UI Scale */
    --fs-body: 1.833333rem;
    --fs-caption: 1.458333rem;
    --fs-small-print: 1.173333rem;
  }
}

@media (min-width: 1621px) {
  :root {
    /* Display Scale */
    --fs-d1: 29.103832rem;
    --fs-d2: 23.283064rem;
    --fs-d3: 18.626451rem;
    --fs-d4: 14.901161rem;
    --fs-d5: 11.920929rem;
    --fs-d6: 9.536743rem;

    /* Headline Scale */
    --fs-h1: 7.629395rem;
    --fs-h2: 6.103516rem;
    --fs-h3: 4.882813rem;
    --fs-h4: 3.90625rem;
    --fs-h5: 3.125rem;
    --fs-h6: 2.5rem;

    /* UI Scale */
    --fs-body: 2rem;
    --fs-caption: 1.6rem;
    --fs-small-print: 1.28rem;
  }
}

/* ------------------  4.0 DISPLAY UTILITIES (D-Scale)  ------------------  */
/* [rem] | [at 14px base] | [at 18px base] | [at 22px base] | [at 24px base] */

.d-1,
.d-2,
.d-3,
.d-4,
.d-5,
.d-6 {
  font-family: var(--font-secondary);
  font-weight: 700;
  line-height: 1.1;
  color: var(--font-color-heading);
  text-wrap: balance;
}

.d-1 {
  font-size: var(--fs-d1);
  /* 203.72681319713592529296875px | 261.93447411060333251953125px | 320.14213502407073974609375px | 349.245965480804443359375px */
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.d-2 {
  font-size: var(--fs-d2);
  /* 162.981450557708740234375px | 209.547579288482666015625px | 256.113708019256591796875px | 279.3967723846435546875px */
  text-wrap: balance;
}

.d-3 {
  font-size: var(--fs-d3);
  /* 130.3851604461669921875px | 167.6380634307861328125px | 204.8909664154052734375px | 223.51741790771484375px */
  text-wrap: balance;
}

.d-4 {
  font-size: var(--fs-d4);
  /* 104.30812835693359375px | 134.11045074462890625px | 163.91277313232421875px | 178.813934326171875px */
  text-wrap: balance;
}

.d-5 {
  font-size: var(--fs-d5);
  /* 83.446502685546875px | 107.288360595703125px | 131.130218505859375px | 143.0511474609375px */
  text-wrap: balance;
}

.d-6 {
  font-size: var(--fs-d6);
  /* 66.7572021484375px | 85.8306884765625px | 104.9041748046875px | 114.44091796875px */
  text-wrap: balance;
}

/* ------------------  5.0 SEMANTIC HEADINGS (H-Scale)  ------------------  */
/* [rem] | [at 14px base] | [at 18px base] | [at 22px base] | [at 24px base] */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
  font-weight: 700; /* Points to Grift-Medium.woff2 */
  line-height: 1.2;
  line-height: normal;
  letter-spacing: 1.709px;
  color: var(--font-color-body);
  text-wrap: balance;
}

h1 {
  font-size: var(
    --fs-h1
  ); /* 53.40576171875px | 68.66455078125px | 83.92333984375px | 91.552734375px */
}
h2 {
  font-size: var(
    --fs-h2
  ); /* 42.724609375px   | 54.931640625px   | 67.138671875px   | 73.2421875px */
}
h3 {
  font-size: var(
    --fs-h3
  ); /* 34.1796875px    | 43.9453125px    | 53.7109375px    | 58.59375px */
}
h4 {
  font-size: var(
    --fs-h4
  ); /* 27.34375px     | 35.15625px      | 42.96875px      | 46.875px */
}
h5 {
  font-size: var(
    --fs-h5
  ); /* 21.875px       | 28.125px       | 34.375px       | 37.5px */
}
h6 {
  font-size: var(
    --fs-h6
  ); /* 17.5px         | 22.5px         | 27.5px         | 30.0px */
}

/* --- Headline Utility Classes --- */
.h1 {
  font-size: var(--fs-h1);
  text-wrap: balance;
}
.h2 {
  font-size: var(--fs-h2);
  text-wrap: balance;
}
.h3 {
  font-size: var(--fs-h3);
  text-wrap: balance;
}
.h4 {
  font-size: var(--fs-h4);
  text-wrap: balance;
}
.h5 {
  font-size: var(--fs-h5);
  text-wrap: balance;
}
.h6 {
  font-size: var(--fs-h6);
  text-wrap: balance;
}
/* ------------------  6.0 BODY & TEXT  ------------------  */

body {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--fs-body);
  color: var(--font-color-body);
  line-height: 1.45;
  text-wrap: pretty;
}
p {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--fs-body);
  color: var(--font-color-body);
  line-height: 20px;
  letter-spacing: 0.7px;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  p {
    line-height: 26px;
    letter-spacing: 0.9px;
  }
}
@media (min-width: 1200px) {
  p {
    line-height: 28px;
    letter-spacing: 1.1px;
  }
}
.caption {
  font-size: var(--fs-caption);
  text-wrap: pretty;
}
.small-print {
  font-size: var(--fs-small-print);
  text-wrap: pretty;
}