/* ==========================================================================
   TOKENS — Liga do Sofá / OXSIDE Design System
   Cópia fiel de tokens/typeface · colors · typography · spacing · effects.
   Nada aqui é decisão desta página: todo valor vem do design system.
   Regra: nenhum hex, px ou família de fonte solto fora deste arquivo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TYPEFACE — Sora (display 600-800) + Inter (corpo/UI 400-700).
   Variáveis, self-hosted, subsets latin e latin-ext. Zero requisição externa.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap;src:url(../assets/fonts/sora-latin.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap;src:url(../assets/fonts/sora-latin-ext.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/inter-latin.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/inter-latin-ext.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --------------------------------------------------------------------------
   COR — extraída de oxside.com.br e travada em DOIS acentos.
   Neon é acento, nunca fundo. Cor saturada ocupa no máximo ~12% da viewport.
   Eliminados da página legada: dourado, verde menta, lavanda, azul-royal, vermelho.
   -------------------------------------------------------------------------- */
:root{
  /* Base — preto absoluto, como a OXSIDE */
  --bg-000:#000000;            /* chão da página */
  --bg-050:#06060A;            /* seção alternada */
  --surface-100:#0C0C13;       /* cards */
  --surface-200:#13131C;       /* hover de card / inputs */

  /* Linhas */
  --line:rgba(148,75,250,.16);      /* fio de cabelo de acento / borda ativa */
  --line-soft:rgba(255,255,255,.07);/* divisor neutro */

  /* Violeta — primária da marca OXSIDE */
  --violet-500:#944BFA;
  --violet-400:#A96FFB;
  --violet-600:#7B32E0;
  --violet-glow:rgba(148,75,250,.32);
  --violet-wash:rgba(148,75,250,.07);

  /* Ciano — secundária, o registro "limpo / esterilizado". Nunca em botão. */
  --cyan-500:#22D3EE;
  --cyan-400:#57E1F5;
  --cyan-glow:rgba(34,211,238,.28);
  --cyan-wash:rgba(34,211,238,.07);

  /* Tinta */
  --ink-000:#FFFFFF;   /* títulos */
  --ink-200:#C7C9D4;   /* corpo — 11,9:1 no preto */
  --ink-400:#8A8DA0;   /* legendas, microcopy */
  --ink-600:#5A5D6E;   /* desabilitado */
  --strike:#6E7180;    /* preço-âncora riscado */

  /* Gradiente de assinatura — a fumaça violeta→azul do hero da OXSIDE.
     Permitido em: filete de 2px de card, marcadores verticais da história,
     brilho de fundo e EXATAMENTE DOIS trechos de texto por página. Só isso. */
  --grad-signature:linear-gradient(100deg,#944BFA 0%,#6B5BF0 45%,#22D3EE 100%);

  /* Apelidos semânticos — preferir estes no código de componente */
  --page:var(--bg-000);
  --page-alt:var(--bg-050);
  --surface-card:var(--surface-100);
  --surface-card-hover:var(--surface-200);
  --border-neutral:var(--line-soft);
  --border-accent:var(--line);
  --text-heading:var(--ink-000);
  --text-body:var(--ink-200);
  --text-muted:var(--ink-400);
  --text-disabled:var(--ink-600);
  --accent:var(--violet-500);
  --accent-hover:var(--violet-400);
  --accent-pressed:var(--violet-600);
  --accent-wash:var(--violet-wash);
  --verify:var(--cyan-500);       /* checks, selo de segurança, timeline, ícones de stat */
  --verify-wash:var(--cyan-wash);
  --focus-ring:var(--cyan-500);
}

/* --------------------------------------------------------------------------
   TIPO — Sora para display, Inter para o resto.
   A escala é deliberadamente NÃO-LINEAR: salto dramático no H1 (64/17 = 3,76x
   o corpo). Escala plana (tudo entre 16 e 32px) é o tell nº 1 de layout gerado.
   -------------------------------------------------------------------------- */
:root{
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;

  /* Tamanhos fluidos: mobile → desktop */
  --fs-hero:clamp(34px,7.2vw,64px);
  --fs-h2:clamp(27px,4.6vw,44px);
  --fs-h3:clamp(19px,2.2vw,24px);
  --fs-body-lg:clamp(17px,1.6vw,19px);
  --fs-body:clamp(16px,1.3vw,17px);
  --fs-label:clamp(12px,1vw,13px);
  --fs-price:clamp(42px,8vw,68px);
  --fs-module-numeral:56px;

  /* Alturas de linha — sem unidade onde precisam escalar com o tipo fluido */
  --lh-hero:1.06;
  --lh-h2:1.12;
  --lh-h3:1.3;
  --lh-body:1.65;
  --lh-body-lg:1.6;
  --lh-label:1.4;

  /* Tracking — correção óptica. Display grande pede negativo, caixa-alta pede positivo. */
  --track-display:-0.025em;  /* acima de 40px */
  --track-h3:-0.01em;
  --track-body:0;
  --track-caps:.16em;        /* eyebrows, labels, badges */
  --track-button:.01em;

  /* Pesos. Texto claro sobre escuro ganha peso óptico — corpo fica em 400, nunca 500. */
  --w-body:400;
  --w-body-strong:600;
  --w-h3:700;
  --w-h2:700;
  --w-hero:800;
  --w-numeral:800;

  --measure-prose:65ch;    /* 620–680px — a coluna legível */
  --measure-header:720px;  /* bloco eyebrow + H2 */
}

/* --------------------------------------------------------------------------
   ESPAÇO — baseline de 8px. Toda margem, padding e gap é múltiplo de 4.
   O padding de seção é VERTICAL-heavy: 72–160px vertical contra 20–32px lateral.
   Padding vertical igual ao lateral é o que faz uma página parecer gerada.
   -------------------------------------------------------------------------- */
:root{
  --s-1:4px;   --s-2:8px;   --s-3:12px;  --s-4:16px;
  --s-6:24px;  --s-8:32px;  --s-12:48px; --s-16:64px;
  --s-24:96px; --s-32:128px;

  /* Ritmo de seção — três densidades, aplicadas conforme o mapa de ritmo */
  --sec-y:clamp(72px,10vw,136px);        /* seção arejada padrão */
  --sec-y-band:clamp(48px,6vw,80px);     /* faixa compacta: stats, suporte */
  --sec-y-focal:clamp(96px,12vw,160px);  /* a oferta — bloco mais alto da página */
  --sec-x:20px;                          /* lateral mobile */
  --sec-x-lg:32px;                       /* lateral desktop */

  --container:1140px;
  --gutter:24px;

  /* Ritmo de título: o espaço ACIMA de um título é ~2x o espaço abaixo dele.
     Um título pertence ao que vem depois, não ao que veio antes. */
  --title-space-above:48px;
  --title-space-below:24px;

  /* Raios — raio aninhado = raio externo − padding */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-full:999px;

  /* Padding de card, por camada de hierarquia */
  --pad-card:28px;        /* cards de módulo e de motivo */
  --pad-card-focal:40px;  /* somente o card da oferta */
}

/* --------------------------------------------------------------------------
   EFEITOS — brilho em vez de sombra. Nenhum elemento recebe mais de DOIS
   tratamentos de superfície (borda / raio / sombra / gradiente).
   Card com borda não recebe sombra.
   -------------------------------------------------------------------------- */
:root{
  --glow-cta:0 8px 32px var(--violet-glow);
  --glow-cta-hover:0 12px 40px var(--violet-glow);
  --glow-focal:0 0 80px var(--violet-glow);          /* só o card da oferta */
  --glow-media:0 0 60px rgba(148,75,250,.18);        /* atrás de vídeo e retratos */

  /* Lavagem atmosférica de fundo. Radial, difusa, ~7% — nunca um gradiente
     diagonal cobrindo a viewport. Alterna o canto de seção em seção. */
  --wash-violet:radial-gradient(60% 60% at 0% 0%,rgba(148,75,250,.07) 0%,transparent 70%);
  --wash-cyan:radial-gradient(60% 60% at 100% 100%,rgba(34,211,238,.05) 0%,transparent 70%);
  --wash-blur:100px;

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:180ms;   /* botões, hovers */
  --dur-enter:520ms;  /* fade-up */
  --stagger:60ms;     /* entre cards de uma mesma grade */

  --lift-card:-4px;
  --lift-button:-2px;

  --scrim-media:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 34%,transparent 72%);
  --bar-blur:blur(16px);
  --bar-bg:rgba(0,0,0,.72);
  --bar-bg-strong:rgba(0,0,0,.9);
}
@media (max-width:768px){
  /* Em tela pequena e clara, brilho forte lê como desfoque — recuar ~40%. */
  :root{
    --glow-cta:0 6px 20px rgba(148,75,250,.19);
    --glow-cta-hover:0 8px 24px rgba(148,75,250,.19);
    --glow-focal:0 0 48px rgba(148,75,250,.19);
    --glow-media:0 0 36px rgba(148,75,250,.11);
    --wash-blur:64px;
  }
}