/* ==========================================================================
   VC SERVIÇOS — DESIGN TOKENS
   Sistema de design: cor, tipografia, espaçamento, sombra, movimento.
   ========================================================================== */

:root {
  /* --- Cor: base neutra fria + acento elétrico + acento de sinal (teal) --- */
  --ink:        #0A0E1A;   /* texto principal / fundo escuro */
  --ink-2:      #131829;   /* fundo escuro secundário (cards no dark) */
  --ink-3:      #1C2338;   /* borda / hairline no dark */
  --paper:      #FFFFFF;   /* fundo claro */
  --mist:       #F4F6FB;   /* fundo de seção claro alternado */
  --mist-2:     #ECF0FA;   /* fundo de card claro */
  --line:       #E4E8F2;   /* hairline no claro */
  --muted:      #5B6478;   /* texto secundário */
  --muted-2:    #8A93A8;   /* texto terciário / legendas */

  --accent:       #2F5CFF; /* azul elétrico — cor de marca */
  --accent-ink:   #1A3ECC; /* azul mais escuro (hover/texto sobre claro) */
  --accent-soft:  #EAF0FF; /* azul muito claro (fundo de badge) */
  --signal:       #17D9C4; /* teal "sinal de vídeo" — acento secundário */
  --signal-ink:   #0EA898;
  --amber:        #FF9F43; /* uso pontual em depoimentos / avaliação */

  /* --- Tipografia --- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* Escala fluida (clamp = mínimo, preferido em vw, máximo) */
  --fs-eyebrow:  0.8125rem;
  --fs-body:     1rem;
  --fs-lg:       1.125rem;
  --fs-h4:       clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --fs-h3:       clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem);
  --fs-h2:       clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem);
  --fs-h1:       clamp(2.6rem, 1.9rem + 3.2vw, 4.5rem);

  /* --- Espaçamento (escala 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: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --section-py: clamp(4rem, 3rem + 4vw, 7rem);
  --container-w: 1280px;
  --container-pad: clamp(1.25rem, 1rem + 2vw, 2.5rem);

  /* --- Forma --- */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* --- Sombra (suave, difusa, nunca dura) --- */
  --shadow-sm: 0 2px 10px rgba(10, 14, 26, 0.05);
  --shadow-md: 0 12px 32px rgba(10, 14, 26, 0.08);
  --shadow-lg: 0 24px 64px rgba(10, 14, 26, 0.12);
  --shadow-accent: 0 16px 40px rgba(47, 92, 255, 0.22);

  /* --- Movimento --- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 800ms;
}

/* ==========================================================================
   RESET — compatibilidade entre navegadores
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
}

button { cursor: pointer; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* Foco visível — acessibilidade, nunca removido */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: white; }