@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');

@font-face {
    font-family: 'Garet Book';
    src: url('../fonts/Garet-Book.woff2') format('woff2'),
        url('../fonts/Garet-Book.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


:root {    
      --brand-red: #D32F2F;
      --brand-yellow: #FFC107;
      --brand-blue: #1976D2;
      --brand-teal: #00ACC1;
      --brand-cream: #fbf8ab; /*#F5E6D3; */
      --brand-light: #F8F9FA;
}

.bg-red { background: var(--brand-red) !important; }
.bg-yellow { background: var(--brand-yellow) !important; }
.bg-blue { background: var(--brand-blue) !important; }
.bg-teal { background: var(--brand-teal) !important; }
.bg-cream { background: var(--brand-cream) !important; }
.bg-light { background: var(--brand-light) !important; }

.text-red { color: var(--brand-red) !important; }
.text-yellow { color: var(--brand-yellow) !important; }
.text-blue { color: var(--brand-blue) !important; }
.text-teal { color: var(--brand-teal) !important; }
.text-cream { color: var(--brand-cream) !important; }

.border-red { border-color: var(--brand-red) !important; }
.border-yellow { border-color: var(--brand-yellow); }
.border-blue { border-color: var(--brand-blue) !important; }
.border-teal { border-color: var(--brand-teal) !important; }

.bg-red-opacity-20 { background-color: rgba(211, 47, 47, 0.2); }
.bg-yellow-opacity-20 { background-color: rgba(255, 193, 7, 0.2); }

.bg-ls { background: url('../images/bg-ls.png'); }

body {
  font-family: 'Inter', sans-serif;
  background-color: #fff;
  color: #222;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
}

.font-garet { 
  font-family: 'Garet Book'; 
}

/* Custom Animations */
@keyframes pop {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
}



.animate-pop {
  animation: pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.animate-float {
  animation: float 3s ease-in-out infinite;
}
.animate-shake-hover:hover {
  animation: shake 0.5s ease-in-out;
}
/* Pattern Classes */
.bg-pattern-main {
  background-image: url('../images/bg-header.png');
  background-size: cover;
  background-position: center;
}
.bg-pattern-diamond-green {
  background-image: url('../images/ls-verde-amarelo.png');
  background-repeat: repeat-x;
  background-size: auto 40px;
}
.bg-pattern-diamond-red {
  background-image: url('../images/ls-vermelho-amarelo.png');
  background-repeat: repeat-x;
  background-size: auto 40px;
}
/* Utility for section dividers */
.section-divider-top {
  width: 100%;
  height: 40px;
  background-image: url('../images/ls-vermelho-amarelo.png');
  background-repeat: repeat-x;
  background-size: auto 40px;
}
.section-divider-bottom {
  width: 100%;
  height: 40px;
  background-image: url('../images/ls-verde-amarelo.png');
  background-repeat: repeat-x;
  background-size: auto 40px;
}
/* Custom Button Styles from Button.tsx */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-weight: bold;
  transition: all 0.3s;
  transform: scale(1);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.btn:hover {
  transform: scale(1.05);
}
.btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.125rem rgba(0, 0, 0, 0.25);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-primary {
  background-color: var(--brand-red);
  color: white;
  border: 2px solid var(--brand-red);
}
.btn-primary:hover {
  background-color: #B71C1C;
}
.btn-primary:focus {
  box-shadow: 0 0 0 0.125rem var(--brand-red), 0 0 0 0.25rem white;
}
.btn-secondary {
  background-color: var(--brand-yellow);
  color: var(--brand-red);
  border: 2px solid var(--brand-yellow);
}
.btn-secondary:hover {
  background-color: #FFB300;
}
.btn-secondary:focus {
  box-shadow: 0 0 0 0.125rem var(--brand-yellow), 0 0 0 0.25rem white;
}
.btn-outline {
  background-color: transparent;
  color: var(--brand-red);
  border: 2px solid var(--brand-red);
}
.btn-outline:hover {
  background-color: var(--brand-red);
  color: white;
}
.btn-outline:focus {
  box-shadow: 0 0 0 0.125rem var(--brand-red), 0 0 0 0.25rem white;
}
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}
.btn-md {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}
.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.btn-full-width {
  width: 100%;
}