/* ============================================
   AGÊNCIA LUKA — Base & Reset
   ============================================ */

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

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-regular);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-loose);
  color: var(--color-dark);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* ── CONTAINER ───────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ── TIPOGRAFIA ──────────────────────────── */
.text-display {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

h1, .h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

h2, .h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

h3, .h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tighter);
}

h4, .h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-tighter);
}

h5, .h5 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-tighter);
}

h6, .h6 {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-tighter);
}

.text-large   { font-size: var(--font-size-large);   line-height: var(--line-height-loose); }
.text-medium  { font-size: var(--font-size-medium);  line-height: var(--line-height-loose); }
.text-regular { font-size: var(--font-size-regular); line-height: var(--line-height-loose); }
.text-small   { font-size: var(--font-size-small);   line-height: var(--line-height-loose); }
.text-tiny    { font-size: var(--font-size-tiny);    line-height: var(--line-height-loose); }

.overline {
  font-size: var(--font-size-tiny);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

/* ── SEÇÕES ──────────────────────────────── */
.section {
  padding-block: var(--space-120);
}

.section--light {
  background-color: var(--color-white);
  color: var(--color-dark);
}

.section--dark {
  background-color: var(--color-blue-900);
  color: var(--color-white);
}

.section--gray {
  background-color: var(--color-gray-50);
  color: var(--color-dark);
}

/* ── GRID ────────────────────────────────── */

/* Grid semântica de 12 colunas — baseada nos tokens do Figma */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols-desktop), 1fr);
  gap: var(--grid-gutter-desktop);
}

/* Utilitários simples de grid */
.grid {
  display: grid;
  gap: var(--space-32);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Span de colunas para uso na grid-layout */
.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* ── RESPONSIVO ──────────────────────────── */

/* Tablet — 768px: 8 cols · gutter 24px · margin 32px */
@media (max-width: 1024px) {
  :root {
    --container-padding: var(--grid-margin-tablet);
  }
  .grid-layout {
    grid-template-columns: repeat(var(--grid-cols-tablet), 1fr);
    gap: var(--grid-gutter-tablet);
  }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile — 393px: 4 cols · gutter 16px · margin 24px */
@media (max-width: 768px) {
  :root {
    --container-padding: var(--grid-margin-mobile);
  }
  .grid-layout {
    grid-template-columns: repeat(var(--grid-cols-mobile), 1fr);
    gap: var(--grid-gutter-mobile);
  }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding-block: var(--space-80); }
  .col-span-1, .col-span-2, .col-span-3, .col-span-4,
  .col-span-5, .col-span-6, .col-span-7, .col-span-8,
  .col-span-9, .col-span-10, .col-span-11, .col-span-12 {
    grid-column: span 4;
  }
}