@import "material-icons/iconfont/filled.css";
/* List of icons: https://marella.me/material-icons/demo/ */
/* @import url(./components/Typography/css/typography.css); */

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "Archivo";
  font-weight: 400;
  src: url(../.fonts/ArchivoSemiCondensed-Regular.woff2) format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-weight: 500;
  src: url(../.fonts/ArchivoSemiCondensed-Medium.woff2) format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-weight: 600;
  src: url(../.fonts/ArchivoSemiCondensed-SemiBold.woff2) format("woff2");
}

@keyframes slide {
  to {
    background-position: 200% 0;
  }
}

:root {
  --clr-bg-def-1: theme(colors.white);
  --clr-bg-def-2: theme(colors.secondary.50);
  --clr-bg-def-3: theme(colors.secondary.100);
  --clr-bg-def-4: theme(colors.secondary.200);
  --clr-bg-def-5: theme(colors.secondary.300);

  --clr-border-def-1: theme(colors.secondary.50);
  --clr-border-def-2: theme(colors.secondary.100);
  --clr-border-def-3: theme(colors.secondary.200);
  --clr-border-def-4: theme(colors.secondary.300);
  --clr-border-def-5: theme(colors.secondary.400);

  --clr-bg-inv-1: theme(colors.primary.600);
  --clr-bg-inv-2: theme(colors.primary.700);
  --clr-bg-inv-3: theme(colors.primary.800);
  --clr-bg-inv-4: theme(colors.primary.900);
  --clr-bg-inv-5: theme(colors.primary.950);

  --clr-border-inv-1: theme(colors.secondary.800);
  --clr-border-inv-2: theme(colors.secondary.900);
  --clr-border-inv-3: theme(colors.secondary.900);
  --clr-border-inv-4: theme(colors.secondary.950);
  --clr-border-inv-5: theme(colors.black);

  --clr-bg-inv-acc-1: theme(colors.secondary.500);
  --clr-bg-inv-acc-2: theme(colors.secondary.600);
  --clr-bg-inv-acc-3: theme(colors.secondary.700);

  --clr-fg-def-1: theme(colors.secondary.950);
  --clr-fg-def-2: theme(colors.secondary.900);
  --clr-fg-def-3: theme(colors.secondary.700);
  --clr-fg-def-4: theme(colors.secondary.500);

  --clr-fg-inv-1: theme(colors.white);
  --clr-fg-inv-2: theme(colors.secondary.100);
  --clr-fg-inv-3: theme(colors.secondary.300);
  --clr-fg-inv-4: theme(colors.secondary.400);
}

html {
  @apply font-sans;
  overflow-x: hidden;
  overflow-y: hidden;
}

.accordeon {
  display: flex;
  flex-direction: column;
  gap: theme(gap.3);
}

.accordeon__header {
  padding: theme(padding.2) theme(padding[1.5]);
  cursor: pointer;
}

.accordeon__header::-webkit-details-marker {
  display: none;
}

.accordeon__body {
  padding: theme(padding.2) 0 theme(padding.1);
}