/* ============================================================================
   tokens.css — IguassuTec Design Tokens
   Fonte única da verdade para cor, tipografia, espaçamento, bordas e timing.
   Nenhum outro arquivo CSS deve conter valores hex, rgb() ou px avulsos.
   ============================================================================ */

:root {
  /* ── Paleta "Deep Iguassu" ─────────────────────────────────────────────── */

  /* Backgrounds */
  --color-bg-deep:     #060E1F;              /* fundo principal do site */
  --color-bg-mid:      #0D1B3E;              /* cards, seções alternadas */
  --color-bg-surface:  #112054;              /* hover states, inputs, destaques internos */

  /* Ação */
  --color-primary:     #1055CC;              /* botões primários, links de ação */
  --color-accent:      #38C5FF;              /* números, glow, linhas decorativas, ciano */

  /* Texto */
  --color-text-high:   #FFFFFF;              /* headings principais, máximo contraste */
  --color-text-mid:    #A8BDD8;              /* corpo de texto, subtítulos */
  --color-text-low:    #5A7FA8;              /* labels, metadata, terciário */

  /* Utilitários */
  --color-border:      rgba(56, 197, 255, 0.15);  /* bordas sutis sobre fundo escuro */
  --color-glow:        rgba(56, 197, 255, 0.25);  /* base dos shadows de glow ciano */

  /* ── Tipografia ────────────────────────────────────────────────────────── */

  --font-heading: 'Space Grotesk', system-ui, sans-serif;  /* headings, badges, números */
  --font-body:    'Inter', system-ui, sans-serif;          /* corpo, UI, parágrafos */

  --text-xs:    0.75rem;                     /* 12px — labels, badges */
  --text-sm:    0.875rem;                    /* 14px — metadata, footer */
  --text-base:  1rem;                        /* 16px — corpo padrão */
  --text-lg:    1.125rem;                    /* 18px — lead text */
  --text-xl:    1.25rem;                     /* 20px — subtítulos */
  --text-2xl:   1.5rem;                      /* 24px — h3 */
  --text-3xl:   2rem;                        /* 32px — h2 mobile */
  --text-4xl:   2.5rem;                      /* 40px — h2 desktop */
  --text-hero:  clamp(2.5rem, 6vw, 4.5rem);  /* headline do Hero (fluido) */

  /* ── Espaçamento — Base 4px ────────────────────────────────────────────── */

  --space-1:    4px;                         /* gap mínimo, ajuste fino */
  --space-2:    8px;                         /* gap de ícones, padding interno pequeno */
  --space-3:   12px;                         /* padding de badges, gap de listas */
  --space-4:   16px;                         /* padding padrão de cards, gap base */
  --space-6:   24px;                         /* separação entre elementos relacionados */
  --space-8:   32px;                         /* padding generoso, gap de grid */
  --space-12:  48px;                         /* separação entre grupos */
  --space-16:  64px;                         /* padding vertical de seções mobile */
  --space-24:  96px;                         /* padding vertical de seções desktop */
  --space-32: 128px;                         /* separações hero / marcos maiores */

  /* ── Bordas ────────────────────────────────────────────────────────────── */

  --radius-sm:    6px;                       /* inputs, badges, botões pequenos */
  --radius-md:   12px;                       /* cards, botões padrão */
  --radius-lg:   20px;                       /* cards grandes, painéis */
  --radius-pill: 999px;                      /* pills, avatares, tags */

  /* ── Sombras ───────────────────────────────────────────────────────────── */

  --shadow-glow-sm: 0 0 12px var(--color-glow);       /* glow sutil em hover/foco */
  --shadow-glow-md: 0 0 32px var(--color-glow);       /* glow forte (hero, ecossistema) */
  --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.4);    /* elevação de cards sobre fundo deep */

  /* ── Transições ────────────────────────────────────────────────────────── */

  --transition-fast:   150ms ease;           /* hover, foco, micro-interações */
  --transition-normal: 250ms ease;           /* transições padrão de UI */
  --transition-slow:   400ms ease;           /* entradas, mudanças de estado grandes */

  /* ── Z-index ───────────────────────────────────────────────────────────── */

  --z-base:       1;                         /* conteúdo padrão empilhado */
  --z-overlay:   10;                         /* overlays locais (gradientes, decoração) */
  --z-nav:      100;                         /* barra de navegação fixa */
  --z-modal:   1000;                         /* modais, menus mobile em tela cheia */

  /* ── Container ─────────────────────────────────────────────────────────── */

  --container-max: 1200px;                   /* largura máxima do conteúdo */
  --container-pad: clamp(1rem, 5vw, 4rem);   /* padding horizontal fluido */

  /* ── Dourado técnico — autoridade, resultado, liderança ───────────────── */

  --color-gold:         #C4922A;             /* accent dourado primário */
  --color-gold-light:   #E8B84B;             /* dourado claro para gradientes */
  --color-gold-glow:    rgba(196, 146, 42, 0.18);  /* glow de ícones/botões */
  --color-gold-border:  rgba(196, 146, 42, 0.25);  /* bordas sutis douradas */

  /* ── Gradientes de fundo com profundidade ─────────────────────────────── */

  --gradient-hero:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(16, 85, 204, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(196, 146, 42, 0.06) 0%, transparent 50%);

  --gradient-section-warm:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(196, 146, 42, 0.05) 0%, transparent 60%);

  /* ── Noise / profundidade ─────────────────────────────────────────────── */

  --noise-opacity: 0.025;

  /* ── Sombras douradas ─────────────────────────────────────────────────── */

  --shadow-gold-sm: 0 0 12px rgba(196, 146, 42, 0.2);
  --shadow-gold-md: 0 0 32px rgba(196, 146, 42, 0.25);
}