/* ==========================================================================
   n8 Cloud Host — Design tokens (compartilhado: landing + manutenção)
   Paleta extraída do guia de marca n8; efeitos inspirados no Clarix DS.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,500;0,700;0,800;1,700;1,800;1,900&family=Sarabun:ital,wght@0,200;0,300;0,400;0,500;0,600;1,400&display=swap");

:root {
  /* Marca */
  --n8-blue:   #0054c8;
  --n8-purple: #7145cc;
  --n8-violet: #9d68d2;   /* ponta clara do gradiente roxo */
  --n8-cyan:   #00d1e8;
  --n8-light:  #efefef;
  --n8-dark:   #212a33;
  --n8-slate:  #3d4753;

  /* Superfícies (tema escuro é o padrão da marca) */
  --bg:        #0d1218;     /* mais profundo que --n8-dark, para o “espaço” */
  --bg-2:      var(--n8-dark);
  --surface:   rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --border:    rgba(255, 255, 255, 0.10);
  --text:      var(--n8-light);
  --text-dim:  rgba(239, 239, 239, 0.66);
  --text-faint:rgba(239, 239, 239, 0.58);   /* ≥ 4.5:1 sobre --bg (WCAG AA) */

  /* Gradientes oficiais (guia de marca) */
  --grad-sky:    linear-gradient(135deg, var(--n8-cyan) 0%, var(--n8-blue) 100%);
  --grad-nebula: linear-gradient(135deg, var(--n8-purple) 0%, var(--n8-violet) 100%);
  --grad-brand:  linear-gradient(90deg, var(--n8-cyan), var(--n8-blue) 40%, var(--n8-purple) 75%, var(--n8-violet));
  --grad-line:   linear-gradient(90deg, transparent, var(--n8-cyan) 20%, var(--n8-blue) 45%, var(--n8-purple) 75%, transparent);

  /* Tipografia
     Display: Saira (substituto Google do AkcelerB-Bold) em itálico pesado.
     Texto:   Sarabun (do Clarix DS) — finos 200/300 para contraste editorial. */
  --font-display: "Saira", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Sarabun", "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-hero:  clamp(2.75rem, 7.2vw, 7.5rem);
  --fs-h2:    clamp(2rem, 4.4vw, 4.25rem);
  --fs-h3:    clamp(1.25rem, 1.8vw, 1.6rem);
  --fs-body:  clamp(1rem, 1.05vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-label: 0.8125rem;

  /* Ritmo */
  --gutter:   clamp(16px, 3.2vw, 50px);
  --maxw:     1320px;
  --radius:   18px;
  --radius-lg:28px;
  --pill:     999px;

  /* Movimento (curva do Clarix) */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur:      0.8s;

  /* Glass */
  --glass-bg:   rgba(255, 255, 255, 0.06);
  --glass-blur: blur(14px) saturate(140%);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.01s; }
}