/* ============================================================================
   SWAVE BRAND · swave.css (v1, extraído do site em jul/2026)
   CSS puro, sem dependência de framework. Fonte da verdade dos valores:
   swave-landing/src/app/globals.css. Se o site mudar, este arquivo muda junto.

   Uso mínimo:
     <link rel="stylesheet" href="swave.css">
     <script>document.documentElement.dataset.theme = 'light';</script>

   DECISÃO DE MARCA: o tema CLARO é o padrão da Swave em todo projeto. Ele passa
   a seriedade que a marca quer. Nunca inicie no escuro por preferência do
   sistema: o escuro existe como opção, ligada por escolha explícita do usuário.

   Fontes (Google Fonts):
     Inter (variável, usa pesos 400/450/500) + Roboto Mono (400/500)
     https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Roboto+Mono:wght@400;500&display=swap
============================================================================ */

/* ----------------------------------------------------------------------------
   1. TOKENS · tema claro (padrão)
---------------------------------------------------------------------------- */
:root {
  --container-width: 1112px;

  /* Azul Swave #2563EB. "heat" é o nome interno do acento da marca. */
  --heat-4: #2563eb0a;
  --heat-8: #2563eb14;
  --heat-12: #2563eb1f;
  --heat-16: #2563eb29;
  --heat-20: #2563eb33;
  --heat-40: #2563eb66;
  --heat-90: #2563ebe6;
  --heat-100: #2563eb;

  /* núcleo */
  --accent-black: #1c1c1e;   /* texto principal (vira #ededed no escuro) */
  --accent-white: #ffffff;
  --surface: #ffffff;        /* cards e painéis elevados */
  --surface-raised: #ffffff;
  --surface-alpha-72: #ffffffb8;

  /* semânticas */
  --accent-forest: #10b981;  /* sucesso, "no ar" */
  --accent-crimson: #ef4444; /* erro */
  --accent-honey: #eab308;   /* atenção */
  --accent-bluetron: #3b82f6;

  /* rampa de tinta (no escuro vira rampa de branco, mantendo o mesmo nome) */
  --black-alpha-1: #00000003;
  --black-alpha-2: #00000005;
  --black-alpha-3: #00000008;
  --black-alpha-4: #0000000a;
  --black-alpha-5: #0000000d;
  --black-alpha-6: #0000000f;
  --black-alpha-7: #00000012;
  --black-alpha-8: #00000014;
  --black-alpha-10: #0000001a;
  --black-alpha-12: #0000001f;
  --black-alpha-16: #00000029;
  --black-alpha-20: #00000033;
  --black-alpha-24: #0000003d;
  --black-alpha-32: #1c1c1e52;
  --black-alpha-40: #1c1c1e66;
  --black-alpha-48: #1c1c1e7a;
  --black-alpha-56: #1c1c1e8f;
  --black-alpha-64: #1c1c1ea3;
  --black-alpha-72: #1c1c1eb8;
  --black-alpha-88: #1c1c1ee0;
  --white-alpha-56: #ffffff8f;
  --white-alpha-72: #ffffffb8;

  /* bordas e fundos */
  --border-faint: #ededed;   /* o divisor estrutural do design: 1px, em tudo */
  --border-muted: #e8e8e8;
  --border-loud: #e6e6e6;
  --illustrations-faint: #ededed;
  --illustrations-muted: #e6e6e6;
  --illustrations-default: #dbdbdb;
  --background-base: #fafafa; /* fundo de página (nunca branco puro) */
  --background-lighter: #fcfcfc;

  /* sombras do botão primário */
  --btn-shadow-ink: rgba(29, 78, 216, 0.25);
  --btn-shadow-soft: rgba(37, 99, 235, 0.12);
  --btn-shadow-mid: rgba(37, 99, 235, 0.16);
  --btn-shadow-loud: rgba(37, 99, 235, 0.2);

  /* popover/dropdown flutuante */
  --shadow-pop: 0 12px 32px -10px rgba(18, 18, 27, 0.2), 0 4px 12px -6px rgba(18, 18, 27, 0.12);

  /* famílias */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ----------------------------------------------------------------------------
   2. TOKENS · tema escuro (OPCIONAL, nunca o padrão)
   Nativo, não inversão: painéis #0d0d0e a #19191b, texto #ededed,
   Azul Swave claro #4D9BFF, sem preto puro em superfícies.
   Só entra quando o usuário escolhe no toggle do produto.
---------------------------------------------------------------------------- */
html[data-theme='dark'] {
  --heat-4: #4d9bff0d;
  --heat-8: #4d9bff17;
  --heat-12: #4d9bff21;
  --heat-16: #4d9bff2b;
  --heat-20: #4d9bff36;
  --heat-40: #4d9bff69;
  --heat-90: #4d9bffe6;
  --heat-100: #4d9bff;

  --accent-black: #ededed;
  --accent-white: #ffffff;
  --surface: #161618;
  --surface-raised: #19191b;
  --surface-alpha-72: #161618b8;

  --black-alpha-1: #ffffff05;
  --black-alpha-2: #ffffff08;
  --black-alpha-3: #ffffff0a;
  --black-alpha-4: #ffffff0d;
  --black-alpha-5: #ffffff12;
  --black-alpha-6: #ffffff14;
  --black-alpha-7: #ffffff17;
  --black-alpha-8: #ffffff1a;
  --black-alpha-10: #ffffff1f;
  --black-alpha-12: #ffffff24;
  --black-alpha-16: #ffffff2b;
  --black-alpha-20: #ffffff33;
  --black-alpha-24: #ffffff3d;
  --black-alpha-32: #ededed5c;
  --black-alpha-40: #ededed70;
  --black-alpha-48: #ededed85;
  --black-alpha-56: #ededed99;
  --black-alpha-64: #edededad;
  --black-alpha-72: #edededc2;
  --black-alpha-88: #ededede6;

  --border-faint: #1f1f22;
  --border-muted: #242428;
  --border-loud: #2b2b30;
  --illustrations-faint: #202024;
  --illustrations-muted: #28282d;
  --illustrations-default: #35353b;
  --background-base: #0d0d0e;
  --background-lighter: #111113;

  --btn-shadow-ink: rgba(13, 37, 84, 0.45);
  --btn-shadow-soft: rgba(77, 155, 255, 0.1);
  --btn-shadow-mid: rgba(77, 155, 255, 0.14);
  --btn-shadow-loud: rgba(77, 155, 255, 0.18);

  --shadow-pop: 0 16px 40px -12px rgba(0, 0, 0, 0.66), 0 6px 16px -8px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* ----------------------------------------------------------------------------
   3. BASE
---------------------------------------------------------------------------- */
body {
  background: var(--background-base);
  color: var(--accent-black);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--heat-20); }
:focus-visible {
  outline: 2px solid var(--heat-100);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------------------------
   4. TIPOGRAFIA (escala medida do site)
   Títulos: Inter 500 com letter-spacing negativo. Labels: Inter 450.
---------------------------------------------------------------------------- */
.sw-title-h1 { font-size: 60px; line-height: 64px; font-weight: 500; letter-spacing: -0.3px; }
.sw-title-h2 { font-size: 52px; line-height: 56px; font-weight: 500; letter-spacing: -0.52px; }
.sw-title-h3 { font-size: 40px; line-height: 44px; font-weight: 500; letter-spacing: -0.4px; }
.sw-title-h4 { font-size: 32px; line-height: 36px; font-weight: 500; letter-spacing: -0.32px; }
.sw-title-h5 { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.24px; }

.sw-body-x-large { font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: -0.1px; }
.sw-body-large   { font-size: 16px; line-height: 24px; font-weight: 400; }
.sw-body-medium  { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0.14px; }
.sw-body-small   { font-size: 13px; line-height: 20px; font-weight: 400; }
.sw-body-x-small { font-size: 12px; line-height: 20px; font-weight: 400; }
.sw-body-input   { font-size: 15px; line-height: 24px; font-weight: 400; }

.sw-label-x-large { font-size: 20px; line-height: 28px; font-weight: 450; letter-spacing: -0.1px; }
.sw-label-large   { font-size: 16px; line-height: 24px; font-weight: 450; }
.sw-label-medium  { font-size: 14px; line-height: 20px; font-weight: 450; }
.sw-label-small   { font-size: 13px; line-height: 20px; font-weight: 450; }
.sw-label-x-small { font-size: 12px; line-height: 20px; font-weight: 450; }

.sw-mono-medium  { font-family: var(--font-mono); font-size: 14px; line-height: 22px; font-weight: 400; }
.sw-mono-small   { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 500; }
.sw-mono-x-small { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400; }

/* rótulo mono da marca: [ ASSIM ] em caixa alta, cinza 40% */
.sw-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--black-alpha-40);
}

/* ----------------------------------------------------------------------------
   5. LAYOUT
---------------------------------------------------------------------------- */
.sw-container {
  max-width: min(calc(100% - 32px), var(--container-width));
  margin-left: auto;
  margin-right: auto;
}
/* divisor estrutural: use border 1px var(--border-faint) entre blocos */

/* ----------------------------------------------------------------------------
   6. BOTÕES (medidos do site)
   Alturas usuais: 32px (header) e 44px (CTA). Raio 8 ou 10.
---------------------------------------------------------------------------- */
.sw-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  padding: 12px 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 450;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s, scale 0.1s, box-shadow 0.1s;
}
.sw-button:active { transition: all 0.2s, scale 50ms, box-shadow 50ms; scale: 0.98; }

.sw-button-primary {
  background: #2563eb; /* fixo nos dois temas: o botão primário é sempre Azul Swave */
  color: #fff;
  box-shadow:
    inset 0 -6px 12px var(--btn-shadow-ink),
    0 2px 4px var(--btn-shadow-soft),
    0 1px 1px var(--btn-shadow-soft),
    0 0.5px 0.5px var(--btn-shadow-mid),
    0 0.25px 0.25px var(--btn-shadow-loud);
}
.sw-button-primary:hover {
  background: #2f6ef0;
  box-shadow:
    inset 0 -6px 12px var(--btn-shadow-ink),
    0 4px 8px var(--btn-shadow-mid),
    0 1px 1px var(--btn-shadow-soft),
    0 0.5px 0.5px var(--btn-shadow-mid),
    0 0.25px 0.25px var(--btn-shadow-loud);
}
.sw-button-secondary { background: var(--black-alpha-4); color: var(--accent-black); }
.sw-button-secondary:hover { background: var(--black-alpha-6); }
.sw-button-tertiary { background: transparent; color: var(--accent-black); }
.sw-button-tertiary:hover { background: var(--black-alpha-4); }

/* ----------------------------------------------------------------------------
   7. MOTION
   Regras: sutil e funcional. Durações de UI entre 0.14s e 0.3s, ease-out.
   Sempre respeitar prefers-reduced-motion (bloco na seção 3).
---------------------------------------------------------------------------- */
@keyframes sw-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes sw-fade-in-up { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes sw-eq { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
@keyframes sw-cursor-blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

.sw-marquee { animation: sw-marquee var(--marquee-duration, 30s) linear infinite; }
.sw-fade-in-up { animation: sw-fade-in-up 0.5s ease-out both; }