/* src/styles/custom.css */
/* Light */
@font-face {
  font-family: 'AllerDisplay';
  src: url('../fonts/AllerDisplay/Aller_It.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Regular */
@font-face {
  font-family: 'AllerDisplay';
  src: url('../fonts/AllerDisplay/Aller_Rg.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium (si no existe, usar Regular) */
@font-face {
  font-family: 'AllerDisplay';
  src: url('../fonts/AllerDisplay/Aller_Rg.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Semi-bold */
@font-face {
  font-family: 'AllerDisplay';
  src: url('../fonts/AllerDisplay/Aller_BdIt.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: 'AllerDisplay';
  src: url('../fonts/AllerDisplay/Aller_Bd.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Extra-bold (si no existe, usar Bold) */
@font-face {
  font-family: 'AllerDisplay';
  src: url('../fonts/AllerDisplay/Aller_Bd.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Black (si no existe, usar Bold) */
@font-face {
  font-family: 'AllerDisplay';
  src: url('../fonts/AllerDisplay/Aller_Bd.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: 242 232 222; /* accent color */
  --color-border: 255 255 255;
  --color-box: 255 255 255;
  --box-border: 229 231 235;
  --box-sd: 226 232 240 / 0.5;
  --heading-1: 58 46 39; /* text-dark */
  --heading-2: 42 98 61; /* secondary */
  --heading-3: 58 46 39; /* text-dark */
}

.dark {
  --color-bg: 42 98 61; /* secondary */
  --color-box: 17 24 39;
  --box-border: 243 244 246/0.1;
  --box-sd: transparent;

  --heading-1: 255 255 255;
  --heading-2: 243 244 246;
  --heading-3: 209 213 219;
}

html {
  scroll-behavior: smooth;
}

[data-toggle-nav][data-open-nav="true"] #line1 {
  transform: translateY(0.375rem) rotate(40deg);
}
[data-toggle-nav][data-open-nav="true"] #line2 {
  transform: scaleX(0);
  opacity: 0;
}
[data-toggle-nav][data-open-nav="true"] #line3 {
  transform: translateY(-0.375rem) rotate(-40deg);
}

[data-nav-overlay][data-is-visible="true"] {
  visibility: visible;
  display: flex;
}

.glass {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(35px);
}

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(35px);
  border-radius: 20px;
  /* border: 2px solid rgba(255, 255, 255, 0.1); */
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  /* padding: 30px 30px 30px 30px; */
}