@import "tailwindcss";
@import 'mapbox-gl/dist/mapbox-gl.css';

@theme {
  /* Fonts */
  --font-montserrat: "Montserrat", sans-serif;
  --font-inter: "Inter", sans-serif;

  /* Color base */
  --color-accent: #FFFFFF;
  --color-on-accent: #4F2773;
  --color-bg: #3B1E5A;
  --color-surface: #4F2773;
  --color-surface-light: #bd93ed;
  --color-surface-extra-light: #e8dafa;
  --color-black: #1E1E1E;
  --color-white: #FFFFFF;
  --color-gray-light: #B9B9B9;
  --color-muted: #DBDBDB;
  --color-border: #E7E7E7

  --color-error: #B91C1C;
  --color-success: #039B65;

  /* Font sizes */
  --text-5.5: 1.375rem; /* 22px */
  --text-8: 2rem; /* 32px */
  --text-32: 2rem; /* 32px */
  --text-40: 2.5rem; /* 40px */

  /* Shadow */
  --shadow-button: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
  --shadow-tool-card: 0 2px 5px 0 rgba(0, 0, 0, 0.25);

}


/* Breakpoints */
/* Desktop < 1920px; */
/* Tablet < 1024px; */
/* Mobile < 640px; */

/* Super desktop */
/* @media screen and (min-width: 1023px) {
  :root {
    --default-font-size: var(--font-size-base, 16px);
    --layout-padding-x: 2rem;

    --font-size-Hero: 48px;
    --font-size-H1: 48px;
    --font-size-H2: 36px;
    --font-size-H3: 32px;
    --font-size-H4: 22px;
    --font-size-H5: 16px;
    --font-size-2xl-custom: 24px;
    --font-size-lg-custom: 18px;
    --font-size-base-custom: 16px;
    --font-size-sm-custom: 14px;
    --font-size-xs-custom: 12px;
    --font-size-button-base: 16px;
  }
} */
/* Tablet */
/* @media screen and (max-width: 1023px) {
  :root {
    --default-font-size: var(--font-size-base); 
    --layout-padding-x: 1rem; 

    --font-size-Hero: 40px;
    --font-size-H1: 40px;
    --font-size-H2: 32px;
    --font-size-H3: 24px;
    --font-size-H4: 22px;
    --font-size-H5: 16px;
    --font-size-2xl-custom: 20px;
    --font-size-lg-custom: 16px;
    --font-size-base-custom: 16px;
    --font-size-sm-custom: 14px;
    --font-size-xs-custom: 12px;
    --font-size-button-base: 14px;
  }
} */
/* Mobile */
/* @media screen and (max-width: 640px) {
  :root {
    --default-font-size: var(--font-size-base); 
    --layout-padding-x: 0.5rem; 

    --font-size-Hero: 32px;
    --font-size-H1: 32px;
    --font-size-H2: 30px;
    --font-size-H3: 24px;
    --font-size-H4: 22px;
    --font-size-H5: 16px;
    --font-size-2xl-custom: 18px;
    --font-size-lg-custom: 16px;
    --font-size-base-custom: 16px;
    --font-size-sm-custom: 14px;
    --font-size-xs-custom: 12px;
    --font-size-button-base: 14px;
  }
} */



@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  src: local("Montserrat Bold"), local("Montserrat-Bold"),
    url(../fonts/Montserrat/Montserrat-Bold.ttf) format("opentype");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src: local("Montserrat Semibold"), local("Montserrat-Semibold"),
    url(../fonts/Montserrat/Montserrat-Semibold.ttf) format("opentype");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  src: local("Montserrat Medium"), local("Montserrat-Medium"),
    url(../fonts/Montserrat/Montserrat-Medium.ttf) format("opentype");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: local("Montserrat Regular"), local("Montserrat-Regular"),
    url(../fonts/Montserrat/Montserrat-Regular.ttf) format("opentype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: local("Inter Bold"), local("Inter-Bold"),
    url(../fonts/Inter/Inter_18pt-Bold.ttf) format("opentype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  src: local("Inter Semibold"), local("Inter-Semibold"),
    url(../fonts/Inter/Inter_18pt-Semibold.ttf) format("opentype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  src: local("Inter Medium"), local("Inter-Medium"),
    url(../fonts/Inter/Inter_18pt-Medium.ttf) format("opentype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: local("Inter Regular"), local("Inter-Regular"),
    url(../fonts/Inter/Inter_18pt-Regular.ttf) format("opentype");
}

html,
body {
  font-family: var(--font-inter);
  font-size: var(--default-font-size, 16px);
  height: 100dvh;
  color: var(--color-black);
  background-color: var(--color-background-extra-light);
  height: 100%;
  margin: 0;
  padding: 0;
}

/* header {
  position: sticky;
  top: 0;
  z-index: 20;
}*/

footer {
  position: sticky;
  top: 100dvh;
} 

html {
  scroll-behavior: smooth;
}

/* h1 {
  font-size: var(--font-size-H1);
}

h2 {
  font-size: var(--font-size-H2);
}

h3 {
  font-size: var(--font-size-H3);
}

h4 {
  font-size: var(--font-size-H4);
}

h5 {
  font-size: var(--font-size-H5);
} */

/* .text-2xl-custom {
  font-size: var(--font-size-2xl-custom);
}

.text-lg-custom {
  font-size: var(--font-size-lg-custom);
}

.text-base-custom {
  font-size: var(--font-size-base-custom);
}

.text-sm-custom {
  font-size: var(--font-size-sm-custom);
}

.text-xs-custom {
  font-size: var(--font-size-xs-custom);
}

.text-button-base {
  font-size: var(--font-size-button-base);
} */

.body-overflow-hidden {
  overflow: hidden;
}