/* ==========================================================
   NETWAVE — Design Tokens
   Direção: corporativo multinacional. Sóbrio, centrado,
   arredondado e com muito espaço negativo. A cor da marca
   é reservada para ação e estado; o resto é neutro.
   ========================================================== */

:root {
  /* ---------- Superfícies (elevação suave) ---------- */
  --bg: #0a0b0f;
  --bg-alt: #0d0f15;
  --surface: #121520;
  --surface-2: #181c28;
  --surface-3: #202533;
  --surface-inset: #0e1017;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
  --border-accent: rgba(78, 158, 255, 0.42);

  /* ---------- Texto ---------- */
  --text: #f6f8fb;
  --text-secondary: #b3bcca;
  --text-muted: #7f8998;
  --text-faint: #58616f;
  --text-inverse: #08090d;

  /* ---------- Marca ---------- */
  --brand: #4e9eff;
  --brand-hover: #6cb0ff;
  --brand-active: #3182e6;
  --brand-soft: rgba(78, 158, 255, 0.12);
  --brand-line: rgba(78, 158, 255, 0.24);

  --cyan: #5fd6ff;
  --cyan-soft: rgba(95, 214, 255, 0.1);

  --gold: #e6b45a;
  --gold-soft: rgba(230, 180, 90, 0.12);

  /* ---------- Estado ---------- */
  --ok: #45d492;
  --ok-soft: rgba(69, 212, 146, 0.12);
  --warn: #e6b45a;
  --warn-soft: rgba(230, 180, 90, 0.12);
  --down: #f06b81;
  --down-soft: rgba(240, 107, 129, 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.84rem;      /* 13.5px — secundário */
  --t-base: 0.97rem;    /* 15.5px — corpo */
  --t-md: 1.1rem;       /* 17.6px — lead */
  --t-lg: 1.3rem;       /* 20.8px — h4 */
  --t-xl: 1.55rem;      /* 24.8px — h3 */
  --t-2xl: 2.05rem;     /* 32.8px — h2 mobile */
  --t-3xl: clamp(2.1rem, 4.4vw, 3rem);      /* h2 desktop */
  --t-4xl: clamp(2rem, 4.8vw, 3.5rem);      /* h1 */
  --t-5xl: clamp(2.4rem, 6vw, 4.75rem);     /* display */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  --tr-tight: -0.024em;
  --tr-snug: -0.014em;
  --tr-normal: 0;
  --tr-wide: 0.05em;
  --tr-wider: 0.13em;

  /* ---------- 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(5rem, 10vw, 8.5rem);
  --section-y-sm: clamp(3.5rem, 7vw, 5.5rem);

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

  /* ---------- Raios (generosos, arredondados) ---------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* ---------- Sombra (em camadas, suave) ---------- */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-sm: 0 4px 14px rgba(0, 0, 0, 0.42);
  --sh-md: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  --sh-lg: 0 32px 70px -20px rgba(0, 0, 0, 0.72);
  --sh-glow: 0 20px 60px -24px rgba(78, 158, 255, 0.5);
  --sh-focus: 0 0 0 3px rgba(78, 158, 255, 0.32);

  /* ---------- 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.24s;
  --t-slow: 0.5s;

  --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;
  }
}