/* styles/global/base.css */

/* Container principal */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-lg);
  }
}

@media (min-width: 1200px) {
  .container {
    padding: 0 var(--space-xl);
  }
}

/* Sistema de grid */
.grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--2-cols {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid--3-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid--4-cols {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Tipografia base */
h1 {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
}

h2 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-normal);
}

h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-normal);
}

p {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-gray-medium);
}

/* Responsividade da tipografia */
@media (max-width: 767px) {
  h1 {
    font-size: var(--font-size-3xl);
  }
  
  h2 {
    font-size: var(--font-size-2xl);
  }
  
  h3 {
    font-size: var(--font-size-xl);
  }
}

/* Classes utilitárias */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* Espaçamentos utilitários */
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

/* Estados para animações */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: var(--transition-slow);
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Estilos para ícones Iconify */
iconify-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

/* Loading state para ícones */
iconify-icon:not(:defined) {
  width: 1em;
  height: 1em;
  background-color: var(--color-gray-light);
  border-radius: 2px;
  opacity: 0.5;
}

/* Seções base */
section {
  padding: var(--space-5xl) 0;
}

@media (max-width: 767px) {
  section {
    padding: var(--space-2xl) 0;
  }
}