/* ==========================================================================
   INOVAIZE — Design Tokens
   Fonte unica de verdade para cores, tipografia, espacamento, raios,
   sombras, brilhos e curvas de animacao. Nenhum arquivo deve usar valores
   "magicos" de cor/medida: tudo referencia as variaveis abaixo.
   ========================================================================== */

:root {
  /* ---------- Cores base (fundo escuro premium) ---------- */
  --bg:            #06070D;   /* fundo geral, quase preto azulado */
  --bg-2:          #080A12;   /* faixas alternadas */
  --surface:       #0C0F1C;   /* cards e paineis */
  --surface-2:     #11152A;   /* card elevado / hover */
  --surface-glass: rgba(18, 22, 44, 0.55);

  /* ---------- Texto ---------- */
  --text:          #ECEEF8;   /* texto principal */
  --text-soft:     #C3C8DD;   /* paragrafos */
  --muted:         #8A90AA;   /* legendas, apoio */
  --muted-2:       #6E748F;   /* apoio secundario */
  --muted-dim:     #565C77;

  /* ---------- Marca + acentos (escala do azul oficial #1d4678) ----------
     #1d4678 detem a marca. Como e escuro p/ fundo escuro, derivamos tons
     mais claros (accent / accent-3) para texto, brilhos e interacao. */
  --brand:         #1d4678;   /* AZUL OFICIAL DA MARCA */
  --brand-deep:    #143155;   /* sombra do azul */
  --accent:        #3a7bc8;   /* azul de destaque (claro o suficiente p/ brilhar) */
  --accent-2:      #1d4678;   /* o proprio azul da marca (tom profundo) */
  --accent-3:      #6ea6e6;   /* azul claro de realce */
  --accent-ink:    #F4F8FF;   /* texto claro sobre o azul (botoes) */

  /* ---------- Gradientes ---------- */
  --grad-brand:  linear-gradient(120deg, #4f8fd6 0%, #2f6cae 55%, #1d4678 100%);
  --grad-brand-soft: linear-gradient(120deg, rgba(79,143,214,.16), rgba(29,70,120,.14) 55%, rgba(110,166,230,.16));
  --grad-text:   linear-gradient(100deg, #EAF1FB 0%, #AECBEE 45%, #6EA6E6 100%);
  --grad-surface: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0));
  --grad-halo:   radial-gradient(60% 60% at 50% 0%, rgba(58,123,200,.22), rgba(6,7,13,0) 70%);

  /* ---------- Bordas e linhas ---------- */
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);
  --border-accent: rgba(58,123,200,.45);
  --hair:          rgba(255,255,255,.06);

  /* ---------- Brilhos / sombras ---------- */
  --glow-accent:  0 0 0 1px rgba(58,123,200,.32), 0 18px 60px -20px rgba(58,123,200,.55);
  --glow-soft:    0 0 40px rgba(58,123,200,.28);
  --shadow-card:  0 24px 60px -28px rgba(0,0,0,.85);
  --shadow-pop:   0 30px 80px -30px rgba(8,10,28,.9);

  /* ---------- Raios ---------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* ---------- Tipografia ---------- */
  --font-brand:   "Arista Pro", "Sora", "Segoe UI", system-ui, sans-serif; /* fonte da LOGO, usada em detalhes da marca */
  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Escala fluida (min .. max) com clamp para responsividade automatica */
  --fs-eyebrow: clamp(.72rem, .68rem + .2vw, .82rem);
  --fs-small:   clamp(.84rem, .8rem + .2vw, .94rem);
  --fs-body:    clamp(.98rem, .94rem + .25vw, 1.1rem);
  --fs-lead:    clamp(1.1rem, 1rem + .6vw, 1.4rem);
  --fs-h6:      clamp(1.05rem, 1rem + .4vw, 1.25rem);
  --fs-h5:      clamp(1.2rem, 1.1rem + .6vw, 1.5rem);
  --fs-h4:      clamp(1.45rem, 1.25rem + 1vw, 2rem);
  --fs-h3:      clamp(1.8rem, 1.4rem + 2vw, 2.8rem);
  --fs-h2:      clamp(2.1rem, 1.5rem + 3vw, 3.6rem);
  --fs-h1:      clamp(2.6rem, 1.6rem + 4.6vw, 5rem);

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

  --tracking-tight: -0.02em;
  --tracking-wide:  0.18em;

  /* ---------- Espacamento (escala 4px) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Espacamento vertical de secao, fluido */
  --section-y: clamp(72px, 7vw, 140px);

  /* ---------- Layout ---------- */
  --maxw: 1200px;
  --maxw-narrow: 880px;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 72px;

  /* ---------- Movimento ---------- */
  --ease:        cubic-bezier(.22, 1, .36, 1);     /* expo-out: entradas */
  --ease-inout:  cubic-bezier(.65, 0, .35, 1);
  --ease-back:   cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .25s;
  --dur:      .45s;
  --dur-slow: .8s;

  /* ---------- Camadas (z-index) ---------- */
  --z-flux: 1;
  --z-content: 2;
  --z-nav: 50;
  --z-overlay: 80;
  --z-modal: 100;
}