/* ============================================================
   ÁGIL CONTABILIDADE E CONTROLADORIA — DESIGN SYSTEM
   Tokens: cor, tipografia, espaçamento, raio, sombra, motion
   Base: branco predominante · grafite/preto · vermelho de destaque
   ============================================================ */

:root {
  /* ---------- Cor · Vermelho institucional (águia) ---------- */
  --red-50:  #FCECEC;
  --red-100: #F7D0D2;
  --red-200: #EFA6A9;
  --red-400: #E0313D;
  --red-500: #C1121F;   /* primário — botões, links, destaques */
  --red-600: #A5101B;   /* institucional — herança do logo */
  --red-700: #820C14;   /* profundo — gradientes escuros */
  --red-glow: #F5333F;  /* brilho da animação */

  /* ---------- Cor · Neutros (light-first) ---------- */
  --white:   #FFFFFF;
  --paper:   #FBFBFA;   /* fundo de página, quase-branco */
  --sand:    #F4F3F1;   /* seção alternativa */
  --sand-2:  #EEEDEA;
  --line:    #E7E6E2;   /* hairlines / bordas */
  --line-2:  #D9D8D3;

  /* ---------- Cor · Tinta (texto sobre claro) ---------- */
  --ink:     #14141A;   /* títulos */
  --ink-2:   #33333B;   /* corpo */
  --muted:   #6A6A73;   /* secundário */
  --muted-2: #9A9AA1;

  /* ---------- Cor · Grafite / preto (seções escuras) ---------- */
  --graphite:   #1A1A1E;
  --graphite-2: #101013;
  --black:      #08080A; /* fundo do hero */
  --on-dark:      #F5F5F4;
  --on-dark-mut:  #A7A7AE;
  --on-dark-line: rgba(255,255,255,.10);

  /* ---------- Tipografia ---------- */
  --font-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* escala fluida (clamp: min · preferido · max) */
  --fs-display: clamp(2.9rem, 1.6rem + 5.6vw, 5.75rem);
  --fs-h1:      clamp(2.35rem, 1.5rem + 3.6vw, 4rem);
  --fs-h2:      clamp(1.9rem, 1.35rem + 2.4vw, 3rem);
  --fs-h3:      clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --fs-h4:      clamp(1.1rem, 1rem + .5vw, 1.3rem);
  --fs-lead:    clamp(1.075rem, 1rem + .45vw, 1.3rem);
  --fs-body:    1.02rem;
  --fs-sm:      0.92rem;
  --fs-xs:      0.8rem;
  --fs-eyebrow: 0.78rem;

  --lh-tight: 1.04;
  --lh-snug: 1.16;
  --lh-body: 1.62;

  /* ---------- Espaçamento (base 4px) ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-10: 4rem;    --sp-12: 5rem;    --sp-16: 7rem;    --sp-20: 9rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  /* ---------- Layout ---------- */
  --container: 1240px;
  --container-narrow: 940px;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);

  /* ---------- Raio ---------- */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* ---------- Sombra ---------- */
  --sh-xs: 0 1px 2px rgba(20,20,26,.05);
  --sh-sm: 0 2px 8px rgba(20,20,26,.06);
  --sh-md: 0 12px 30px -12px rgba(20,20,26,.14);
  --sh-lg: 0 30px 60px -20px rgba(20,20,26,.22);
  --sh-red: 0 18px 40px -16px rgba(193,18,31,.45);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .18s;
  --t: .34s;
  --t-slow: .6s;

  --z-nav: 100;
  --z-overlay: 200;
  --z-hero-anim: 300;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: var(--lh-snug);
  font-weight: 700;
  letter-spacing: -0.02em;
}

a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; }
::selection { background: var(--red-500); color: #fff; }

:focus-visible {
  outline: 2px solid var(--red-500);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Skip link acessibilidade */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }