/* ==========================================================
   NETWAVE — Design Tokens
   Direção: infraestrutura séria, sóbria, técnica.
   Escala tipográfica ampla, grid de 12 colunas, espaço
   negativo dominante. Sem neon, sem glow, sem gradiente
   decorativo. A cor da marca é reservada para ação e estado.
   ========================================================== */

:root {
  /* ---------- Superfícies ---------- */
  --bg: #06080c;
  --bg-alt: #080b11;
  --surface: #0c1017;
  --surface-2: #10151e;
  --surface-3: #151b26;
  --surface-inset: #090c12;

  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.13);
  --border-accent: rgba(79, 170, 255, 0.32);

  /* ---------- Texto ---------- */
  --text: #f0f4f9;
  --text-secondary: #a8b3c2;
  --text-muted: #737f90;
  --text-faint: #4b5563;
  --text-inverse: #06080c;

  /* ---------- Marca ---------- */
  --brand: #4faaff;
  --brand-hover: #6fbcff;
  --brand-active: #2f8ae8;
  --brand-soft: rgba(79, 170, 255, 0.11);
  --brand-line: rgba(79, 170, 255, 0.2);

  --cyan: #64dcff;
  --cyan-soft: rgba(100, 220, 255, 0.1);

  --gold: #e0a94a;
  --gold-soft: rgba(224, 169, 74, 0.12);

  /* ---------- Estado ---------- */
  --ok: #3ecf8e;
  --ok-soft: rgba(62, 207, 142, 0.12);
  --warn: #e0a94a;
  --warn-soft: rgba(224, 169, 74, 0.12);
  --down: #f2617a;
  --down-soft: rgba(242, 97, 122, 0.12);

  /* ---------- Tipografia ---------- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, monospace;

  --t-2xs: 0.6875rem;   /* 11px — labels, eyebrows */
  --t-xs: 0.75rem;      /* 12px — meta */
  --t-sm: 0.8125rem;    /* 13px — secundário */
  --t-base: 0.9375rem;  /* 15px — corpo */
  --t-md: 1.0625rem;    /* 17px — lead */
  --t-lg: 1.25rem;      /* 20px — h4 */
  --t-xl: 1.5rem;       /* 24px — h3 */
  --t-2xl: 2rem;        /* 32px — h2 mobile */
  --t-3xl: clamp(2rem, 4.2vw, 2.875rem);   /* h2 desktop */
  --t-4xl: clamp(1.9rem, 4.6vw, 3.5rem);  /* h1 */
  --t-5xl: clamp(2.1rem, 5.4vw, 4.25rem);  /* display */

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --lh-relaxed: 1.72;

  --tr-tight: -0.022em;
  --tr-snug: -0.012em;
  --tr-normal: 0;
  --tr-wide: 0.06em;
  --tr-wider: 0.14em;

  /* ---------- Espaçamento (base 4px) ---------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --section-y: clamp(4.5rem, 9vw, 7.5rem);
  --section-y-sm: clamp(3rem, 6vw, 4.5rem);

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 68px;

  /* ---------- Raios ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* ---------- Sombra ---------- */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --sh-md: 0 12px 32px rgba(0, 0, 0, 0.5);
  --sh-lg: 0 24px 64px rgba(0, 0, 0, 0.6);
  --sh-focus: 0 0 0 3px rgba(79, 170, 255, 0.28);

  /* ---------- Movimento ---------- */
  --ease: cubic-bezier(0.22, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.14s;
  --t-base: 0.22s;
  --t-slow: 0.42s;

  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 300;
  --z-toast: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms;
    --t-base: 0.01ms;
    --t-slow: 0.01ms;
  }
}