/* ============================================================
   base.css — reset, typography, layout, utilities
   Depende de tokens.css.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover { color: var(--color-primary-dark); }

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-4xl); font-weight: var(--font-weight-black); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

p { line-height: var(--line-height-relaxed); }

.lead {
  font-size: var(--text-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}

.display-6 {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

/* --- Container --- */
.container {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--space-12);
}

@media (max-width: 576px) {
  .container { padding-inline: var(--space-9); }
}

/* --- Sections --- */
.section {
  padding-block: var(--space-15);
}

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

.section-navy {
  background-color: var(--color-primary-navy);
  color: var(--color-white);
}

.section-navy h1, .section-navy h2, .section-navy h3,
.section-navy h4, .section-navy h5, .section-navy h6 {
  color: var(--color-white);
}

@media (max-width: 768px) {
  .section { padding-block: var(--space-12); }
}

/* --- Grid (mobile-first, like Bootstrap) --- */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.row-tight { gap: var(--space-8); }
.row-loose { gap: var(--space-14); }
.row-flush { gap: 0; }

.col { flex: 1 1 0; min-width: 0; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-6  { flex: 0 0 calc((100% - var(--space-12)) / 2); max-width: calc((100% - var(--space-12)) / 2); }
.col-4  { flex: 0 0 calc((100% - var(--space-12) * 2) / 3); max-width: calc((100% - var(--space-12) * 2) / 3); }
.col-3  { flex: 0 0 calc((100% - var(--space-12) * 3) / 4); max-width: calc((100% - var(--space-12) * 3) / 4); }

@media (min-width: 768px) {
  .col-md-3  { flex: 0 0 calc((100% - var(--space-12) * 3) / 4); max-width: calc((100% - var(--space-12) * 3) / 4); }
  .col-md-4  { flex: 0 0 calc((100% - var(--space-12) * 2) / 3); max-width: calc((100% - var(--space-12) * 2) / 3); }
  .col-md-6  { flex: 0 0 calc((100% - var(--space-12)) / 2);     max-width: calc((100% - var(--space-12)) / 2); }
  .col-md-8  { flex: 0 0 calc((100% - var(--space-12)) * 2 / 3); max-width: calc((100% - var(--space-12)) * 2 / 3); }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (max-width: 767px) {
  /* Quando só .col-md-* existe, vira coluna inteira no mobile */
  [class*="col-md-"]:not([class*="col-6"]):not([class*="col-4"]):not([class*="col-3"]):not([class*="col-12"]) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* --- Text utilities --- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-uppercase { text-transform: uppercase; letter-spacing: 1px; }

.text-muted { color: var(--color-text-muted); }
.text-white { color: var(--color-white); }
.text-brand { color: var(--color-primary); }
.text-brand-navy { color: var(--color-primary-navy); }
.text-red   { color: var(--color-red); }

.font-regular  { font-weight: var(--font-weight-regular); }
.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }
.font-black    { font-weight: var(--font-weight-black); }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }

/* --- Background utilities --- */
.bg-white { background-color: var(--color-white); }
.bg-navy  { background-color: var(--color-primary-navy); }
.bg-brand { background-color: var(--color-primary); }
.bg-light { background-color: var(--color-gray-light); }

/* --- Radius & shadow --- */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-pill { border-radius: var(--radius-pill); }
.rounded-round{ border-radius: var(--radius-round); }

.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-card { box-shadow: var(--shadow-card); }

/* --- Flex utilities --- */
.d-flex        { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-block       { display: block; }
.d-inline-block{ display: inline-block; }
.d-none        { display: none; }

.flex-column     { flex-direction: column; }
.flex-row        { flex-direction: row; }
.flex-wrap       { flex-wrap: wrap; }
.align-center    { align-items: center; }
.align-start     { align-items: flex-start; }
.align-end       { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }

.gap-1 { gap: var(--space-4); }
.gap-2 { gap: var(--space-6); }
.gap-3 { gap: var(--space-9); }
.gap-4 { gap: var(--space-12); }

/* --- Spacing --- */
.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-8); }
.mt-3 { margin-top: var(--space-12); }
.mt-4 { margin-top: var(--space-14); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-8); }
.mb-3 { margin-bottom: var(--space-12); }
.mb-4 { margin-bottom: var(--space-14); }
.mb-5 { margin-bottom: var(--space-15); }
.mx-auto { margin-inline: auto; }

.py-0 { padding-block: 0; }
.py-3 { padding-block: var(--space-12); }
.py-4 { padding-block: var(--space-14); }
.py-5 { padding-block: var(--space-15); }
.pe-3 { padding-right: var(--space-12); }
.pe-5 { padding-right: var(--space-15); }
.px-2 { padding-inline: var(--space-8); }

@media (min-width: 768px) {
  .px-md-0 { padding-inline: 0; }
}

/* --- Misc helpers --- */
.h-100 { height: 100%; }
.w-100 { width: 100%; }
.img-fluid { max-width: 100%; height: auto; }

.divider {
  width: 60px;
  height: 2px;
  background-color: var(--color-text);
  border: 0;
  margin: var(--space-9) auto;
}

/* Centered text blocks (parágrafos longos, leads) */
.text-block {
  max-width: 820px;
  margin-inline: auto;
}

.text-block-narrow {
  max-width: 720px;
  margin-inline: auto;
}