@import "tailwindcss";

@theme {
  --font-barlow: 'Barlow', sans-serif;
  --font-barlow-semi-condensed: 'BarlowSemiCondensed', sans-serif;

  /* Color base */
  --color-consumo-base: #F28C8C;
  --color-consumo-light: #F6B1B1;
  --color-consumo-extra-light: #FAD1D1;
  --color-iguales-base: #C98EEF;
  --color-iguales-light: #DAB2F4;
  --color-iguales-extra-light: #E9D2F9;
  --color-aula-base: #5CAACC;
  --color-aula-light: #90C5DC;
  --color-aula-extra-light: #BEDDEB;
  --color-certifica-base: #CAF03F;
  --color-certifica-light: #DFF68C;
  --color-certifica-extra-light: #ECFABC;
  --color-foro-base: #E2CA64;
  --color-foro-light: #EBDB96;
  --color-foro-extra-light: #F3EAC1;
  --color-ods-base: #2FB384;
  --color-ods-light: #72CBAB;
  --color-ods-extra-light: #ACE1CE;
  /* Color background */
  --color-background-dark: #091B3D;
  --color-background-dark-2: #0D2758;
  --color-background-light: #F9F4F2;
  --color-background-extra-light: #FDFCFB;
  /* Color button */
  --color-button: #143E8C;
  --color-button-hover: #1E58C7;

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

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

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


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

/* Super desktop */
@media screen and (min-width: 1920px) {
  :root {
    --default-font-size: var(--font-size-lg); /* 18px */
    --layout-padding-x: 2rem; /* 32px */

    --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: 24px;
    --font-size-lg: 18px;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;
    --font-size-button-base: 16px;
  }
}
/* Tablet */
@media screen and (max-width: 1023px) {
  :root {
    --default-font-size: var(--font-size-lg); /* 16px */
    --layout-padding-x: 1rem; /* 16px */

    --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: 20px;
    --font-size-lg: 16px;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;
    --font-size-button-base: 14px;
  }
}
/* Mobile */
@media screen and (max-width: 640px) {
  :root {
    --default-font-size: var(--font-size-lg); /* 16px */
    --layout-padding-x: 0.5rem; /* 8px */

    --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: 18px;
    --font-size-lg: 16px;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;
    --font-size-button-base: 14px;
  }
}

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

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

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

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

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

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

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

header, main {
  margin: 0 var(--layout-padding-x, 32px);
}

html {
  scroll-behavior: smooth;
}

.min-h-screen-header {
  min-height: calc(100dvh - 15rem);
}

.max-h-sidebar {
  max-height: calc(100dvh - 8rem);
}

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

.bg-gradient-conic {
  background: conic-gradient(
    from 179deg at -5.88% 52.83%, 
    var(--Color-base--color-certifica-base, rgba(202, 240, 63, 0.10)) 53.653846979141235deg, 
    var(--Color-base--color-consumo-base, rgba(242, 140, 140, 0.10)) 155.76923489570618deg, 
    var(--Color-base--color-aula-base, rgba(92, 170, 204, 0.10)) 233.65383625030518deg, rgba(57, 182, 137, 0.10) 304.61538791656494deg), 
    var(--Background--bg-light, #F9F4F2);
}