/*
 * ============================================================
 * base.css — Fundação do Sistema de Design da UNA Tecnologia
 * ============================================================
 * Este arquivo contém:
 *   1. Reset CSS (normaliza os estilos entre navegadores)
 *   2. Variáveis CSS globais (cores, fontes, espaçamentos)
 *   3. Tipografia global e configurações base do documento
 *
 * COMO ALTERAR AS CORES DO SITE:
 *   Modifique os valores em :root abaixo. Todas as seções
 *   que usam essas variáveis serão atualizadas automaticamente.
 * ============================================================
 */

/* ── 1. IMPORTAÇÃO DE FONTES ─────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,300..900;1,6..12,300..900&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* ── 2. VARIÁVEIS GLOBAIS (Tokens de Design Oficiais) ────── */
:root {
  /* --- Paleta Oficial de Cores (5 Tons da Marca) --- */
  --color-chumbo:   #2E2E2E;   /* Chumbo (#2E2E2E) — Seções intermediárias e cards escuros */
  --color-telha:    #C06A2C;   /* Telha (#C06A2C) — Cor principal da marca & destaque CTA */
  --color-offwhite: #F7F6F2;   /* Off-White (#F7F6F2) — Fundo claro das seções */
  --color-carbono:  #1A1A1A;   /* Carbono (#1A1A1A) — Fundo escuro (header, hero, footer) */
  --color-terra:    #8C451B;   /* Terra (#8C451B) — Destaque secundário & estado hover de botões */

  /* --- Mapeamento nos Tokens de Design --- */
  --color-primary:        var(--color-telha);     /* #C06A2C — Cor principal da marca */
  --color-primary-light:  #d67a38;                /* Telha em tom mais claro */
  --color-primary-dark:   var(--color-terra);     /* #8C451B — Terra (hover e variações escuras) */

  --color-accent:         var(--color-telha);     /* #C06A2C — Destaque principal/CTA */
  --color-accent-hover:   var(--color-terra);     /* #8C451B — Hover dos botões de ação */

  /* --- Cores de Superfície --- */
  --color-bg-light:       var(--color-offwhite);  /* #F7F6F2 — Fundo claro oficial */
  --color-bg-dark:        var(--color-carbono);   /* #1A1A1A — Fundo escuro oficial */
  --color-bg-chumbo:      var(--color-chumbo);    /* #2E2E2E — Superfície secundária escura */
  --color-bg-card:        #ffffff;                /* Fundo dos cards de modelos */

  /* --- Cores de Texto --- */
  --color-text-primary:   var(--color-carbono);   /* #1A1A1A — Texto em fundos claros */
  --color-text-secondary: #4a4a4a;                /* Subtítulos e descrições */
  --color-text-light:     #ffffff;                /* Texto em fundos escuros */
  --color-text-muted:     #7d7d7d;                /* Metadados e textos atenuados */

  /* --- Cores de Bordas e Sombras --- */
  --color-border:         #e2ded6;                /* Borda compatível com off-white */
  --color-shadow:         rgba(26, 26, 26, 0.12); /* Sombra baseada em carbono */

  /* ── Tipografia Oficial ────────────────────────────────────
   * TÍTULOS E DISPLAY: Outfit (Extrabold / Black — 700 / 800 / 900)
   * CORPO E PARÁGRAFOS: Nunito Sans (Regular / Semibold — 400 / 600 / 700)
   */
  --font-primary:   'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-secondary: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ── Escala Tipográfica Mobile-First com Fluid Typography ──
   * Mobile (320px) → Desktop (1200px)
   * Título H1: 28px → 38px (line-height: 1.2)
   * Títulos H2: 22px → 32px (line-height: 1.3)
   * Subtítulos H3: 18px → 24px (line-height: 1.4)
   * Corpo / P: 16px (1rem) → 18px (line-height: 1.5 a 1.6)
   * Legendas / Secundário: 14px (0.875rem) → 15px
   */
  --text-xs:   clamp(0.8125rem, 1.2vw, 0.875rem); /* 13px → 14px */
  --text-sm:   clamp(0.875rem,  1.5vw, 0.9375rem);/* 14px → 15px (Legendas/Secundários) */
  --text-base: clamp(1rem,      1.8vw, 1.125rem); /* 16px → 18px (Body / P) */
  --text-lg:   clamp(1.125rem,  2.2vw, 1.25rem);  /* 18px → 20px (Subtítulos H3) */
  --text-xl:   clamp(1.25rem,   2.8vw, 1.5rem);   /* 20px → 24px */
  --text-2xl:  clamp(1.375rem,  3.5vw, 2rem);     /* 22px → 32px (Títulos H2) */
  --text-3xl:  clamp(1.75rem,   4.5vw, 2.5rem);   /* 28px → 40px (H1) */
  --text-4xl:  clamp(2rem,      5.5vw, 3.25rem);  /* 32px → 52px */

  /* ── Espaçamentos (Regra de 8px) ─────────────────────────── */
  --space-xs:   0.25rem;    /*  4px */
  --space-sm:   0.5rem;     /*  8px */
  --space-md:   1rem;       /* 16px (Gap/Margem padrão mobile) */
  --space-lg:   1.25rem;    /* 20px (Padding lateral mobile) */
  --space-xl:   1.5rem;     /* 24px (Respiro interno) */
  --space-2xl:  2.5rem;     /* 40px */
  --space-3xl:  3.5rem;     /* 56px (Espaçamento entre seções mobile: 48px a 64px) */
  --space-4xl:  5rem;       /* 80px */

  /* ── Bordas e Raios ─────────────────────────────────────── */
  --radius-sm:  0.25rem;    /*  4px */
  --radius-md:  0.5rem;     /*  8px (Padrão mobile) */
  --radius-lg:  0.75rem;    /* 12px */
  --radius-xl:  1rem;       /* 16px */
  --radius-full: 9999px;    /* Pill/círculo */

  /* ── Transições ─────────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow:   0.5s ease;

  /* ── Sombras ─────────────────────────────────────────────── */
  --shadow-sm:  0 2px 8px var(--color-shadow);
  --shadow-md:  0 4px 20px var(--color-shadow);
  --shadow-lg:  0 8px 40px var(--color-shadow);
  --shadow-xl:  0 16px 60px rgba(26, 26, 26, 0.25);

  /* ── Largura máxima e Padding do Container (Regra de 16px a 20px no mobile) ── */
  --container-max-width: 1280px;
  --container-padding:   clamp(1rem, 4vw, 2rem); /* 16px (mobile) → 32px (desktop) */

  /* ── Altura do cabeçalho fixo ───────────────────────────── */
  --header-height: 68px;
}

/* ── 3. RESET CSS ────────────────────────────────────────── */
/*
 * Reset moderno baseado em Josh W. Comeau's CSS Reset.
 * Remove margens, paddings e corrige inconsistências entre
 * navegadores.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Rolagem suave ao clicar em âncoras do menu */
  scroll-behavior: smooth;
  /* Evita zoom indesejado em campos de formulário no iOS */
  -webkit-text-size-adjust: 100%;
  /* Reserva espaço para a barra de rolagem evitar "saltos" */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg-light);
  /* Suaviza a renderização de fontes */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Imagens responsivas por padrão */
img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Remove estilo padrão de listas */
ul,
ol {
  list-style: none;
}

/* Links sem sublinhado por padrão */
a {
  text-decoration: none;
  color: inherit;
}

/* Formulários herdam fonte do documento */
input,
button,
textarea,
select {
  font: inherit;
}

/* Parágrafos com wrapping inteligente */
p {
  overflow-wrap: break-word;
}

/* Cabeçalhos com fonte oficial Outfit em peso Extrabold */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  font-family: var(--font-primary);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* ── 4. UTILITÁRIOS GLOBAIS ──────────────────────────────── */

/* Contêiner centralizado com largura máxima */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Texto visível apenas para leitores de tela (acessibilidade) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Offset de âncoras para seções de tela cheia */
.section-anchor {
  scroll-margin-top: 0;
}