/* All styling that is used for thewhole app */
 @font-face {
  font-family: "Nunito Bold";
  src: url("data/fonts/nunito/NUNITOSANS_10PT-EXTRABOLD.TTF") format("truetype");
  font-weight: 700; /* Optional: adjust as needed */
  font-style: normal;  /* Optional: adjust as needed */
}

@font-face {
  font-family: "Nunito Regular";
  src: url("data/fonts/nunito/NUNITOSANS_10PT-REGULAR.TTF") format("truetype");
  font-weight: 400; /* Optional: adjust as needed */
  font-style: normal;  /* Optional: adjust as needed */
}

@font-face {
  font-family: "Nunito Light";
  src: url("data/fonts/nunito/NUNITOSANS_10PT-LIGHT.TTF") format("truetype");
  font-weight: 300; /* Optional: adjust as needed */
  font-style: normal;  /* Optional: adjust as needed */
}

@font-face {
  font-family: "Gabarito";
  src: url("data/fonts/gabarito/Gabarito-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Gabarito";
  src: url("data/fonts/gabarito/Gabarito-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Gabarito";
  src: url("data/fonts/gabarito/Gabarito-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Gabarito";
  src: url("data/fonts/gabarito/Gabarito-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

/* Use Bold as Regular since we don't have a regular weight file */
@font-face {
  font-family: "Gabarito";
  src: url("data/fonts/gabarito/Gabarito-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Gabarito";
  src: url("data/fonts/gabarito/Gabarito-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
:root {

  --size_input_field: 300px;
  --input_padding: 35px;
  --small_padding: 10px;
  --input_height: 36px;
  --footer_height: 45px;

  /* Input shadow variables */
  --input_shadow_offset_x: 0px;
  --input_shadow_offset_y: 0px;
  --input_shadow_blur: 0px;
  --input_shadow_spread: 0;
  --input_shadow_color: rgba(0, 0, 0, 0.3);
  --input_shadow: var(--input_shadow_offset_x) var(--input_shadow_offset_y) var(--input_shadow_blur) var(--input_shadow_spread) var(--input_shadow_color);

  /* slighter border for input fields */
  --input_border_width: 1px;
  --input_border_style: solid;
  --input_border_color: color-mix(in srgb, var(--clr_bg_tertiary) 60%, black);
  --input_border: var(--input_border_width) var(--input_border_style) var(--input_border_color);

  /* Input border solid (for elements that need visible borders) */
  --input_border_solid_width: 2px;
  --input_border_solid_style: solid;
  --input_border_solid_color: var(--clr_text_primary);
  --input_border_solid: var(--input_border_solid_width) var(--input_border_solid_style) var(--input_border_solid_color);

    /* Input border solid (for focus) */
    --input_border_focus_width: 2px;
    --input_border_focus_style: solid;
    --input_border_focus_color: var(--clr_interaction1);
    --input_border_focus: var(--input_border_focus_width) var(--input_border_focus_style) var(--input_border_focus_color);


  --font-size-very-small: 0.7em;
  --font-size-small: 0.8em;
  --font-size-large: 1.2em;
  --font-size-very-large: 2em;

 

}


 /*----------------------------------*/
 /* styling of the basic classes */



  /* general button styling */
  .tr-btn {
  border-radius: 3px !important; /* rounded corners */
  height: 48px;
  cursor: pointer;
  transition: filter 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.tr-btn.tr-btn-default, .tr-btn.tr-btn-default:active {
  width: 164px;
  padding:0 var(--small_padding);
  border: var(--input_border);
}

.tr-btn.tr-btn-large, .tr-btn.tr-btn-large:active{
  width: 100%;
  padding:0 var(--small_padding);
  border: var(--input_border);
}

.tr-btn.tr-btn-fit, .tr-btn.tr-btn-fit:active{
  width: fit-content;
  height: fit-content;
  padding: 0 var(--small_padding);
  border: var(--input_border);
}

/* Hover: brightness filter for solid buttons */
.tr-btn.tr-btn-default:hover,
.tr-btn.tr-btn-large:hover,
.tr-btn.tr-btn-fit:hover{
  filter: brightness(80%);
}


.tr-btn.tr-btn-inline {
  width: auto;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  color: var(--clr_text_primary) ;
  text-decoration: none;
}
.tr-btn.tr-btn-inline:hover,
.tr-btn.tr-btn-inline:focus,
.tr-btn.tr-btn-inline:active,
.tr-btn.tr-btn-inline:hover:focus,
.tr-btn.tr-btn-inline:focus-visible,
.tr-btn.tr-btn-inline:hover:active {
  color: var(--clr_interaction1);
  background:none;
  box-shadow: none;
}

.tr-btn.tr-btn-inline:focus,
.tr-btn.tr-btn-inline:active {
  color: color-mix(in srgb, var(--clr_interaction1) 80%, black);
  background:none;
}


/* data-color rules include :hover/:focus/:active to override Bootstrap .btn-default:hover */
.tr-btn[data-color="danger"],
.tr-btn[data-color="danger"]:hover,
.tr-btn[data-color="danger"]:focus,
.tr-btn[data-color="danger"]:active {
  color: var(--clr_text_secondary);
  background-color: var(--clr_danger);
  border-color: var(--input_border_color);
}

.tr-btn[data-color="warning"],
.tr-btn[data-color="warning"]:hover,
.tr-btn[data-color="warning"]:focus,
.tr-btn[data-color="warning"]:active {
  color: var(--clr_text_secondary);
  background-color: var(--clr_warning);
  border-color: var(--input_border_color);
}

.tr-btn[data-color="success"],
.tr-btn[data-color="success"]:hover,
.tr-btn[data-color="success"]:focus,
.tr-btn[data-color="success"]:active {
  color: var(--clr_text_secondary);
  background-color: var(--clr_success);
  border-color: var(--clr_text_primary);
}

.tr-btn[data-color="accent"],
.tr-btn[data-color="accent"]:hover,
.tr-btn[data-color="accent"]:focus,
.tr-btn[data-color="accent"]:active {
  color: var(--clr_text_secondary);
  background-color: var(--clr_interaction1);
  border-color: var(--clr_text_secondary);
}

.tr-btn[data-color="accent-reverse"],
.tr-btn[data-color="accent-reverse"]:hover,
.tr-btn[data-color="accent-reverse"]:focus,
.tr-btn[data-color="accent-reverse"]:active {
  color: var(--clr_interaction1);
  background-color: var(--clr_bg_primary);
  border-color: var(--clr_interaction1);
}

.tr-btn[data-color="interaction2"],
.tr-btn[data-color="interaction2"]:hover,
.tr-btn[data-color="interaction2"]:focus,
.tr-btn[data-color="interaction2"]:active {
  color: var(--clr_text_primary);
  background-color: var(--clr_interaction2);
  border-color: var(--clr_interaction2);
}

.tr-btn[data-color="interaction2-reverse"],
.tr-btn[data-color="interaction2-reverse"]:hover,
.tr-btn[data-color="interaction2-reverse"]:focus,
.tr-btn[data-color="interaction2-reverse"]:active {
  color: var(--clr_interaction2);
  background-color: var(--clr_bg_primary);
  border-color: var(--clr_interaction2);
}

.tr-btn:disabled,
.tr-btn[disabled],
.tr-btn:disabled:hover,
.tr-btn[disabled]:hover {
  color: var(--clr_text_tertiary);
  background-color: var(--clr_bg_tertiary);
  border-color: var(--clr_bg_tertiary);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Override data-color styles when button is disabled */
.tr-btn[data-color]:disabled,
.tr-btn[data-color][disabled],
.tr-btn[data-color]:disabled:hover,
.tr-btn[data-color][disabled]:hover {
  color: var(--clr_text_tertiary);
  background-color: var(--clr_bg_tertiary);
  border-color: var(--clr_bg_tertiary);
  cursor: not-allowed;
  opacity: 0.7;
  filter: none;
}

/* For non-button elements, data-color only affects text color */
:not(.btn)[data-color] {
  background-color: transparent;
  border-color: transparent;
}
:not(.btn)[data-color="danger"] { color: var(--clr_danger); }
:not(.btn)[data-color="warning"] { color: var(--clr_warning); }
:not(.btn)[data-color="success"] { color: var(--clr_success); }
:not(.btn)[data-color="accent"] { color: var(--clr_interaction1); }
:not(.btn)[data-color="accent-reverse"] { color: var(--clr_interaction1); }
:not(.btn)[data-color="interaction2"] { color: var(--clr_interaction2); }
:not(.btn)[data-color="interaction2-reverse"] { color: var(--clr_interaction2); }



  /*----------------------------------*/
  /* styling of the basic elements */

  html body {
    font-family: var(--font-primary) ;
    font-weight: 400;
    font-size: 16px;
    background-color: var(--clr_bg_primary) ;
    color: var(--clr_text_primary) ;
  }
  h1, h2 {
    font-weight: 700;
  }

  h3, h4, h5, h6{
    font-weight: 600;
  }