/* LAYOUT */

@media (max-width: 1599px) {
  :root {
    --container-xs-max-width: 800px !important;
    --container-s-max-width: 1000px !important;
    --container-m-max-width: 1300px !important;
    --container-l-max-width: 1400px !important;
  }
}

@media (min-width: 1600px) {
  :root {
    --container-xs-max-width: 1000px !important;
    --container-s-max-width: 1200px !important;
    --container-m-max-width: 1400px !important;
    --container-l-max-width: 1600px !important;
  }
}

@media (max-width: 767px) {
  :root {
    --screen-gutter: 1.5rem;
  }
}

@media (min-width: 768px) {
  :root {
    --screen-gutter: 2rem;
  }
}

:root {
  /* COLORS */

  /* COLORS - Primary */

  --clr-primary: #578fca;
  --clr-primary-l-1: #9abce1;
  --clr-primary-l-2: #eef4fa;
  --clr-primary-d-1: #274564;
  --clr-primary-d-2: #081522;

  /* COLORS - Primary - BG */

  --clr-bg-primary: light-dark(var(--clr-primary), var(--clr-primary-d-1));
  --clr-bg-primary-l-1: light-dark(var(--clr-primary-l-1), var(--clr-primary-d-1));
  --clr-bg-primary-l-2: light-dark(var(--clr-primary-l-2), var(--clr-primary-d-2));

  /* COLORS - Primary - TEXT */

  --clr-text-primary: light-dark(var(--clr-primary), var(--clr-primary));
  --clr-text-primary-l-1: light-dark(var(--clr-primary-l-1), var(--clr-primary-l-1));
  --clr-text-primary-l-2: light-dark(var(--clr-primary-l-2), var(--clr-primary-l-2));

  /* COLORS - Primary - BORDER */

  --clr-border-primary: light-dark(var(--clr-primary), var(--clr-primary));
  --clr-border-primary-l-1: light-dark(var(--clr-primary-l-1), var(--clr-primary-l-1));
  --clr-border-primary-l-2: light-dark(var(--clr-primary-l-2), var(--clr-primary-l-2));

  /* COLORS - Primary - OTHER */

  --clr-shadow-primary: light-dark(var(--clr-primary), var(--clr-primary));
  --clr-overlay-primary: light-dark(var(--clr-primary), var(--clr-primary));

  /* COLORS - Secondary */

  --clr-secondary: light-dark(#19ac6e, #19ac6e);
  --clr-secondary-l-1: light-dark(#75cda8, #75cda8);
  --clr-secondary-l-2: light-dark(#edf9f4, #edf9f4);

  /* COLORS - Secondary - BG */

  --clr-bg-secondary: light-dark(var(--clr-secondary), var(--clr-secondary));
  --clr-bg-secondary-l-1: light-dark(var(--clr-secondary-l-1), var(--clr-secondary-l-1));
  --clr-bg-secondary-l-2: light-dark(var(--clr-secondary-l-2), var(--clr-secondary-l-2));

  /* COLORS - Secondary - TEXT */

  --clr-text-secondary: light-dark(var(--clr-secondary), var(--clr-secondary));
  --clr-text-secondary-l-1: light-dark(var(--clr-secondary-l-1), var(--clr-secondary-l-1));
  --clr-text-secondary-l-2: light-dark(var(--clr-secondary-l-2), var(--clr-secondary-l-2));

  /* COLORS - Secondary - BORDER*/

  --clr-border-secondary: light-dark(var(--clr-secondary), var(--clr-secondary));
  --clr-border-secondary-l-1: light-dark(var(--clr-secondary-l-1), var(--clr-secondary-l-1));
  --clr-border-secondary-l-2: light-dark(var(--clr-secondary-l-2), var(--clr-secondary-l-2));

  /* COLORS - Accent 1 */

  --clr-accent1: light-dark(#ffcd00, #fccb45);
  --clr-accent1-l-1: light-dark(#fee5a2, #fee5a2);
  --clr-accent1-l-2: light-dark(#fffbf0, #fffbf0);

  /* COLORS - Accent 1 - BG */

  --clr-bg-accent1: light-dark(var(--clr-accent1), var(--clr-accent1));
  --clr-bg-accent1-l-1: light-dark(var(--clr-accent1-l-1), var(--clr-accent1-l-1));
  --clr-bg-accent1-l-2: light-dark(var(--clr-accent1-l-2), var(--clr-accent1-l-2));

  /* COLORS - Accent 1 - TEXT */

  --clr-text-accent1: light-dark(var(--clr-accent1), var(--clr-accent1));
  --clr-text-accent1-l-1: light-dark(var(--clr-accent1-l-1), var(--clr-accent1-l-1));
  --clr-text-accent1-l-2: light-dark(var(--clr-accent1-l-2), var(--clr-accent1-l-2));

  /* COLORS - Accent 1 - BORDER */

  --clr-border-accent1: light-dark(var(--clr-accent1), var(--clr-accent1));
  --clr-border-accent1-l-1: light-dark(var(--clr-accent1-l-1), var(--clr-accent1-l-1));
  --clr-border-accent1-l-2: light-dark(var(--clr-accent1-l-2), var(--clr-accent1-l-2));

  /* COLORS - Accent 1 - OTHER */

  --clr-shadow-accent1: light-dark(rgba(212, 177, 63, 0.5), rgba(212, 177, 63, 0.5));

  /* COLORS - Accent 2 */

  --clr-accent2: light-dark(#ef7d00, #ef7d00);
  --clr-border-accent2: light-dark(var(--clr-accent2), var(--clr-accent2));

  /* COLORS - Accent 2 - BG */

  --clr-bg-accent2: light-dark(var(--clr-accent2), var(--clr-accent2));
  --clr-bg-accent2-l-1: light-dark(var(--clr-accent2-l-1), var(--clr-accent2-l-1));
  --clr-bg-accent2-l-2: light-dark(var(--clr-accent2-l-2), var(--clr-accent2-l-2));

  /* COLORS - Accent 2 - TEXT */

  --clr-text-accent2: light-dark(var(--clr-accent2), var(--clr-accent2));
  --clr-text-accent2-l-1: light-dark(var(--clr-accent2-l-1), var(--clr-accent2-l-1));
  --clr-text-accent2-l-2: light-dark(var(--clr-accent2-l-2), var(--clr-accent2-l-2));

  /* COLORS - Accent 2 - BORDER */

  --clr-border-accent2: light-dark(var(--clr-accent2), var(--clr-accent2));
  --clr-border-accent2-l-1: light-dark(var(--clr-accent2-l-1), var(--clr-accent2-l-1));
  --clr-border-accent2-l-2: light-dark(var(--clr-accent2-l-2), var(--clr-accent2-l-2));

  /* COLORS - Accent 3 */

  --clr-accent3: light-dark(#ef7d00, #ef7d00);

  /* COLORS - Accent 3 - BG */

  --clr-bg-accent3: light-dark(var(--clr-accent3), var(--clr-accent3));
  --clr-bg-accent3-l-1: light-dark(var(--clr-accent3-l-1), var(--clr-accent3-l-1));
  --clr-bg-accent3-l-2: light-dark(var(--clr-accent3-l-2), var(--clr-accent3-l-2));

  /* COLORS - Accent 3 - TEXT */

  --clr-text-accent3: light-dark(var(--clr-accent3), var(--clr-accent3));
  --clr-text-accent3-l-1: light-dark(var(--clr-accent3-l-1), var(--clr-accent3-l-1));
  --clr-text-accent3-l-2: light-dark(var(--clr-accent3-l-2), var(--clr-accent3-l-2));

  /* COLORS - Accent 3 - BORDER */

  --clr-border-accent3: light-dark(var(--clr-accent3), var(--clr-accent3));
  --clr-border-accent3-l-1: light-dark(var(--clr-accent3-l-1), var(--clr-accent3-l-1));
  --clr-border-accent3-l-2: light-dark(var(--clr-accent3-l-2), var(--clr-accent3-l-2));

  /* COLORS - Light */

  --clr-light: #ffffff;
  --clr-light-d-1: #b3b3b3;
  --clr-light-d-2: #808080;

  /* COLORS - Light - BG */

  --clr-bg-light: light-dark(var(--clr-light), var(--clr-dark));

  /* COLORS - Light - TEXT */

  --clr-text-light: light-dark(var(--clr-light), var(--clr-light));
  --clr-text-light-d-1: light-dark(var(--clr-light-d-1), var(--clr-light-d-1));
  --clr-text-light-d-2: light-dark(var(--clr-light-d-2), var(--clr-light-d-2));

  /* COLORS - Light - BORDER */

  --clr-border-light: light-dark(var(--clr-light), var(--clr-dark));
  --clr-border-light-d-1: light-dark(var(--clr-light-d-1), var(--clr-light-d-1));
  --clr-border-light-d-2: light-dark(var(--clr-light-d-2), var(--clr-light-d-2));

  /* COLORS - Dark */

  --clr-dark: light-dark(hsla(0, 0%, 0%, 1), hsla(0, 0%, 0%, 1));

  /* COLORS - Dark - BG */

  --clr-bg-dark: light-dark(var(--clr-dark), var(--clr-dark));

  /* COLORS - Dark - TEXT */

  --clr-text-dark: light-dark(var(--clr-dark), var(--clr-dark));

  /* COLORS - Dark - BORDER */

  --clr-border-dark: light-dark(var(--clr-dark), var(--clr-dark));

  /* COLORS - Dark - OTHER */

  --clr-overlay-dark: light-dark(hsla(0, 0%, 0%, 0.5), hsla(0, 0%, 0%, 0.5));

  /* COLORS - Grey */

  --clr-grey: light-dark(#757575, #e9e9e9);
  --clr-grey-l-1: light-dark(#e1e1e1, #e9e9e9);
  --clr-grey-l-2: light-dark(#f5f7f7, #e9e9e9);
  --clr-grey-d-1: light-dark(#434343, #e9e9e9);

  /* COLORS - Grey - BG */

  --clr-bg-grey: light-dark(var(--clr-grey), var(--clr-grey));
  --clr-bg-grey-l-1: light-dark(var(--clr-grey-l-1), var(--clr-grey-l-1));
  --clr-bg-grey-l-2: light-dark(var(--clr-grey-l-2), var(--clr-grey-l-2));

  /* COLORS - Grey - BORDER */
  --clr-border-grey: light-dark(var(--clr-grey), var(--clr-grey));
  --clr-border-grey-l-1: light-dark(var(--clr-grey-l-1), var(--clr-grey-l-1));
  --clr-border-grey-l-2: light-dark(var(--clr-grey-l-2), var(--clr-grey-l-2));

  /* COLORS - Grey - TEXT */
  --clr-text-grey: light-dark(var(--clr-grey), var(--clr-grey));
  --clr-text-grey-l-1: light-dark(var(--clr-grey-l-1), var(--clr-grey-l-1));
  --clr-text-grey-l-2: light-dark(var(--clr-grey-l-2), var(--clr-grey-l-2));
  --clr-text-grey-d-1: light-dark(var(--clr-grey-d-1), var(--clr-grey-d-1));

  /* COLORS - BODY */

  --clr-text-body: var(--clr-text-grey-d-1);
  --clr-bg-body: light-dark(#ffffff, #000000);

  /* COLORS - Others */
  --shadow-primary: hsla(0, 0%, 0%, 0.4);
  --clr-validation: #16a873;
  --clr-error: #f55945;

  /* TYPOGRAPHY */
  --font-heading: Inter, sans-serif;
  --font-body: Inter, sans-serif;

  --text-xs: clamp(1.2rem, 1.2vw, 1.2rem);
  --text-s: clamp(1.4rem, 1.4vw, 1.4rem);
  --text-m: clamp(1.6rem, 1.6vw, 1.6rem);
  --text-l: clamp(2.2rem, 2.4vw, 2rem);
  --text-xl: clamp(2.4rem, 2.4vw, 2.6rem);
  --text-2xl: clamp(3rem, 3vw, 4rem);
  --text-3xl: clamp(3.6rem, 3.6vw, 4.6rem);
  --text-4xl: clamp(4rem, 4vw, 7rem);

  /* SPACES */
  --space-4xs: clamp(0.52rem, calc(-0.03vw + 0.53rem), 0.49rem);
  --space-3xs: clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem);
  --space-2xs: clamp(0.82rem, calc(0.16vw + 0.77rem), 0.99rem);
  --space-xs: clamp(1.02rem, calc(0.35vw + 0.91rem), 1.4rem);
  --space-s: clamp(1.28rem, calc(0.65vw + 1.07rem), 1.98rem);
  --space-m: clamp(2rem, calc(1.11vw + 1.24rem), 2.8rem);
  --space-l: clamp(2.6rem, calc(1.81vw + 1.42rem), 3.96rem);
  --space-xl: clamp(2.6rem, calc(2.87vw + 1.58rem), 5.6rem);
  --space-2xl: clamp(3.13rem, calc(4.44vw + 1.71rem), 7.92rem);
  --space-3xl: clamp(3.91rem, calc(6.75vw + 1.75rem), 11.19rem);
  --space-4xl: clamp(4.88rem, calc(10.13vw + 1.64rem), 15.83rem);

  /* RADIUS */
  --radius-xs: 0.2rem;
  --radius-s: 0.5rem;
  --radius-m: 1rem;
  --radius-l: 2rem;
  --radius-xl: 3rem;
  --radius-full: 999rem;
  --radius-site: 1rem;

  /* RADIUS */
  --shadow-xs: 0 1px 2px var(--shadow-primary);
  --shadow-s: 0 1.5px 3px var(--shadow-primary);
  --shadow-m: 0 2px 6px var(--shadow-primary);
  --shadow-l: 0 3px 12px var(--shadow-primary);
  --shadow-xl: 0 6px 48px var(--shadow-primary);
}