/** @import must precede all other statements */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fahkwang:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap");

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

body, html {
  font-family: "Almarai", sans-serif;
  scroll-behavior: smooth;
}

@layer base {
  /**
   * Tailwind CSS theme
   * tailwind.config.ts expects the following color variables to be expressed as HSL values.
   * A different format will require also updating the theme in tailwind.config.ts.
  */
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }

  :where(p, span, li, h1, h2, h3, h4, h5, h6, a, button, label, td, th) {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  pre,
  code {
    overflow-x: auto;
    white-space: pre;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  html {
    scroll-behavior: smooth;
  }
}

/* ---------------------------------------------
   FONTES PERSONALIZADAS
---------------------------------------------- */
.font-almarai {
  font-family: 'Almarai', sans-serif;
}
.font-fahkwang {
  font-family: 'Fahkwang', sans-serif;
}
.font-lato {
  font-family: 'Lato', sans-serif;
}

/* ---------------------------------------------
   CORES BRAND
---------------------------------------------- */
.text-brand-beige { color: #F2EEE3; }
.text-brand-red { color: #AF1F1F; }
.text-brand-brown { color: #432618; }
.text-brand-green { color: #158806; }
.text-brand-gold { color: #E9DEC0; }
.text-brand-text { color: #9A9075; }
.text-brand-border { color: #E8E8E9; }

.bg-brand-beige { background-color: #F2EEE3; }
.bg-brand-red { background-color: #AF1F1F; }
.bg-brand-brown { background-color: #432618; }
.bg-brand-green { background-color: #158806; }
.bg-brand-gold { background-color: #E9DEC0; }
.bg-brand-text { background-color: #9A9075; }
.bg-brand-border { background-color: #E8E8E9; }

.border-brand-brown { border-color: #432618; }

/* ---------------------------------------------
   CORES VIA CSS VARIABLES (HSL)
---------------------------------------------- */
.border {
  border-color: hsl(var(--border));
}
.bg-background {
  background-color: hsl(var(--background));
}
.text-foreground {
  color: hsl(var(--foreground));
}

/* PRIMARY */
.bg-primary {
  background-color: hsl(var(--primary));
}
.text-primary-foreground {
  color: hsl(var(--primary-foreground));
}

/* SECONDARY */
.bg-secondary {
  background-color: hsl(var(--secondary));
}
.text-secondary-foreground {
  color: hsl(var(--secondary-foreground));
}

/* DESTRUCTIVE */
.bg-destructive {
  background-color: hsl(var(--destructive));
}
.text-destructive-foreground {
  color: hsl(var(--destructive-foreground));
}

/* MUTED */
.bg-muted {
  background-color: hsl(var(--muted));
}
.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}

/* ACCENT */
.bg-accent {
  background-color: hsl(var(--accent));
}
.text-accent-foreground {
  color: hsl(var(--accent-foreground));
}

/* POPOVER */
.bg-popover {
  background-color: hsl(var(--popover));
}
.text-popover-foreground {
  color: hsl(var(--popover-foreground));
}

/* CARD */
.bg-card {
  background-color: hsl(var(--card));
}
.text-card-foreground {
  color: hsl(var(--card-foreground));
}

/* SIDEBAR */
.bg-sidebar { background-color: hsl(var(--sidebar-background)); }
.text-sidebar { color: hsl(var(--sidebar-foreground)); }
.bg-sidebar-primary { background-color: hsl(var(--sidebar-primary)); }
.text-sidebar-primary-foreground { color: hsl(var(--sidebar-primary-foreground)); }
.bg-sidebar-accent { background-color: hsl(var(--sidebar-accent)); }
.text-sidebar-accent-foreground { color: hsl(var(--sidebar-accent-foreground)); }
.border-sidebar { border-color: hsl(var(--sidebar-border)); }
.ring-sidebar { --tw-ring-color: hsl(var(--sidebar-ring)); }

/* ---------------------------------------------
   BORDER RADIUS (usando variáveis)
---------------------------------------------- */
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}

/* ---------------------------------------------
   KEYFRAMES — Accordion (Tailwind Animate)
---------------------------------------------- */
@keyframes accordion-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height); }
}

@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); }
  to { height: 0; }
}

.animate-accordion-down {
  animation: accordion-down 0.2s ease-out;
}
.animate-accordion-up {
  animation: accordion-up 0.2s ease-out;
}

/* ---------------------------------------------
   CONTAINER CUSTOMIZADO
---------------------------------------------- */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (min-width: 1400px) {
  .container {
    max-width: 1400px;
  }
}

#swiper-sobre {
  width: 100%;
  max-width: 100%;
}

#swiper-sobre .swiper-wrapper {
  max-width: 100%;
}

#swiper-sobre .swiper-slide {
  width: 100% !important;
  max-width: 100% !important;
}

#swiper-progress {
    transition-property: width;
    transition-timing-function: linear;
}