@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "./styles/themes.css";
@import "./styles/fonts.css";
@import "./styles/texts.css";
@import "./styles/inputs.css";
@import "./styles/shapes.css";

#three-canvas {
  display: block;
  margin: 0 auto;
}

[data-theme='custom_light']
{
  --primary: 250, 250, 250;
  --primary_highlight: 255, 255, 255;
  --secondary: 200, 200, 200;
  --primary_text: 90, 90, 90;
  --primary_highlight_text: 30, 30, 30;
  --primary_highlight_text: 30, 30, 30;
  --info: 100, 100, 240;
  --success: 100, 240, 100;
  --warning: 240, 240, 100;
  --error: 240, 100, 100;
}

[data-theme='custom_dark']
{
  --primary: 40, 40, 40;
  --primary_highlight: 30, 30, 30;
  --secondary: 20, 20, 20;
  --primary_text: 255, 255, 255;
  --primary_highlight_text: 250, 250, 250;
  --info: 100, 100, 240;
  --success: 100, 240, 100;
  --warning: 240, 240, 100;
  --error: 240, 100, 100;
}

@font-face {
  font-family: "Roboto Condensed", serif;
  font-optical-sizing: auto;
  font-weight: 100 900;
  font-style: normal;
  src: url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap") format("truetype");
}

@font-face {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100 900;
  font-style: normal;
  src: url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap") format("truetype");
}

@font-face {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 100 900;
  font-style: normal;
  src: url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap") format("truetype");
}

.button-menu
{
  @apply h-full flex items-center justify-center text-primary_text text-sm font-RobotoCondensed bg-primary focus:bg-primary_highlight focus:drop-shadow-custom-shadow-1 hover:bg-primary_highlight hover:drop-shadow-custom-shadow-1
}
.button-icon
{
  @apply w-[48px] h-[48px] highlight-high-hierarchy flex items-center justify-center
}
.slider
{
  @apply w-[192px] h-full flex flex-col items-center justify-center text-primary_text text-center font-normal
}
.custom-text
{
  @apply text-primary_text text-base font-RobotoCondensed
}
.highlight-low-hierarchy
{
  @apply btn-hover text-primary_text bg-primary focus:bg-primary_highlight focus:drop-shadow-custom-shadow-1 hover:bg-primary_highlight hover:drop-shadow-custom-shadow-1
}
.highlight-medium-hierarchy
{
  @apply btn-hover text-primary_text bg-primary focus:bg-primary_highlight focus:drop-shadow-custom-shadow-1 hover:bg-primary_highlight hover:drop-shadow-custom-shadow-1
}
.highlight-high-hierarchy
{
  @apply btn-hover text-primary_text bg-primary focus:bg-primary_highlight focus:drop-shadow-custom-shadow-1 hover:bg-primary_highlight hover:drop-shadow-custom-shadow-1
}

@layer components {
  .btn-hover {
    @apply relative transition duration-200 ease-in-out;
  }

  .btn-hover::after {
    content: '';
    @apply absolute bottom-0 left-0 h-0 w-[2px] bg-blue-500 transition-all duration-200;
  }

  .btn-hover:hover::after,
  .btn-hover:focus::after {
    @apply h-full;
  }

  .btn-hover:hover,
  .btn-hover:focus {
    @apply text-blue-500;
  }

  .opacity-highlight
  {
    @apply opacity-50 hover:opacity-100
  }

  /* MENUS */
  .text-title-1
  {
      @apply text-gray-800 text-[18px] capitalize font-medium
  }
  .text-title-2
  {
      @apply text-gray-800 text-[14px] capitalize font-Roboto
  }
  .text-content-1
  {
      @apply text-gray-600 text-[14px]
  }
}