@import "./components/cards.css";
@import "./components/fonts.css";
@import "./components/forms.css";
@import "./components/buttons.css";
@import "./components/badges.css";
@import "./components/cards.css";
@import "./components/dialog.css";
@import "./components/header.css";
@import "./components/dropdown-avatar.css";
@import "./components/carousel.css";
@import "./components/grid-escuderias.css";
@import "./components/products-container.css";
@import "./components/product-info-container.css";
@import "./components/card-product.css";
@import "./components/cart-container.css";
@import "./components/objective.css";
@import "./components/footer.css";
@import "./components/profileInfo.css";
@import "./components/locations-container.css";
@import "./components/checkout-container.css";
@import "./components/security.css";



@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Regular.ttf") format("truetype");
  font-style: normal;
}

@font-face {
  font-family: "DM Sans Bold";
  src: url("../fonts/DMSans-Bold.ttf") format("truetype");
  font-style: normal;
}

@font-face {
  font-family: "DM Sans SemiBold";
  src: url("../fonts/DMSans-SemiBold.ttf") format("truetype");
  font-style: normal;
}

@font-face {
  font-family: "DM Sans Italic";
  src: url("../fonts/DMSans-Italic.ttf") format("truetype");
  font-style: normal;
}

:root {
  --primary: rgb(243, 50, 50);
  --primary-hover: rgba(220, 40, 40);
  --secondary: rgb(16, 16, 65);
  --secondary-hover: rgb(26, 26, 104);
  --text-light: #ffffff;
  --text-dark: #333333;
  --background-light: rgb(245, 247, 250);
  --dropdown-text: rgb(211, 210, 210);
  --success: rgb(40, 167, 69);
  --error: rgb(220, 53, 69);
  --warning: rgb(255, 193, 7);
  --info: rgb(23, 162, 184);
  --light: rgb(248, 249, 250);
  --dark: rgb(34, 34, 34);

  --bg-secondary: #ffffff;
  --bg-shadow: rgba(0, 0, 0, 0.4);
  --border: #dddddd;
  --radius: 8px;
  --text: #333333;

  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  --font: "DM Sans", sans-serif;
  --font-bold: "DM Sans Bold", sans-serif;
  --font-semibold: "DM Sans SemiBold", sans-serif;
  --font-italic: "DM Sans Italic", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  scrollbar-color: var(--background-light) transparent;
  scrollbar-width: thin;
  scrollbar-track-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family:
    var(--font),
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--background-light);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  color: var(--primary);
  text-decoration: none;
  font-family: var(--font-semibold);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

/* Authentication layout */
.auth-body {
  background-color: var(--background-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container-logo {
  display: flex;
  justify-content: center;
  align-items: center;

  user-select: none;
}

.container-logo img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.auth-form-container {
  width: 100%;
}

.auth-footer {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.95rem;
}

.text-danger {
  color: var(--primary);
}

.flex{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}