/* Clipa: tokens do design system. Fonte da verdade: docs/design-system.md
   Nasceu do onboarding da extensão. Site e onboarding usam os mesmos nomes. */

@font-face { font-family: Anton; src: url(/fonts/anton-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2'); font-weight: 400 800; font-display: swap; }

:root {
  /* --- Cor: paleta fechada. Nada de hex solto fora daqui --- */
  /* Fundo e estrutura */
  --c-moldura: #190527;   /* fundo, calha, texto sobre claro */
  --c-apagado: #2b1140;   /* superfície: cartão, painel sem arte */
  --c-linha:   #4a2a6b;   /* borda, divisória, estado desligado */
  /* Texto */
  --c-texto:   #ffffff;   /* título e texto forte */
  --c-pessego: #f6d0a2;   /* texto de apoio e botão principal */
  --c-lilas:   #b9a3cf;   /* nota, legenda, texto fraco */
  /* Marca e acento */
  --c-rosa:    #e8327a;   /* assinatura: contorno da marca, alerta */
  --c-ouro:    #eebc62;   /* destaque, preço, hover do botão, sucesso */
  --c-agua:    #85bcbf;   /* selo, rótulo, foco */
  /* Gradiente do título (só no adesivo "corta a live sozinho" e em fundo de destaque) */
  --g-sol: linear-gradient(180deg, #3a54c5 0%, #6239b3 30%, #bc3bb5 52%, #e8327a 68%, #eb6972 82%, #ee8f4a 100%);

  /* Estados: apelidos, não cores novas */
  --c-foco: var(--c-agua);
  --c-sucesso: var(--c-ouro);
  --c-erro: var(--c-rosa);
  --c-desligado: var(--c-linha);

  /* --- Tipo: 2 famílias, 3 pesos --- */
  --f-titulo: Anton, Impact, 'Arial Narrow', sans-serif;   /* só peso 400 */
  --f-texto: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --p-normal: 400;
  --p-medio: 600;
  --p-forte: 800;

  /* Escala (rem = 16px) */
  --t-xs: .75rem;      /* 12: rótulo em caixa alta, selo pequeno */
  --t-sm: .875rem;     /* 14: nota, linha pequena */
  --t-md: 1rem;        /* 16: corpo */
  --t-lg: 1.1875rem;   /* 19: subtítulo, texto de apoio */
  --t-xl: 1.375rem;    /* 22: Anton pequeno (item de lista, passo) */
  --t-2xl: 1.75rem;    /* 28: marca, preço */
  --t-h2: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);    /* 32 a 52 */
  --t-h1: clamp(2.75rem, 1.4rem + 6vw, 6.25rem);   /* 44 a 100 */
  --a-titulo: 1.04;  /* altura de linha do Anton */
  --a-texto: 1.5;
  --e-caixa: .08em;  /* espaçamento de letra do rótulo em caixa alta */

  /* --- Espaço: base 4 --- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 72px; --e-9: 112px;
  --largura: 1180px;
  --margem: clamp(16px, 4vw, 32px);

  /* --- Forma: canto reto é a assinatura --- */
  --raio: 0;
  --borda: 2px;          /* cartão, campo, divisória */
  --borda-forte: 3px;    /* item escolhido, quadro de arte */
  --calha: 12px;         /* calha entre painéis, sempre na cor da moldura */

  /* --- Sombra: dura, sem desfoque --- */
  --s-quadro: 0 0 0 var(--borda-forte) var(--c-texto), 0 0 0 calc(var(--borda-forte) * 2) var(--c-moldura);
  --s-pop: 4px 4px 0 var(--c-rosa);
  --s-pop-forte: 8px 8px 0 var(--c-rosa);

  /* --- Movimento --- */
  --d-rapido: 150ms;   /* hover, clique */
  --d-medio: 320ms;    /* entrada de elemento */
  --d-lento: 600ms;    /* entrada grande, adesivo caindo */
  --d-cena: 900ms;     /* sequência de scroll */
  --passo: 40ms;       /* atraso entre irmãos */
  --passo-painel: 70ms;/* atraso entre painéis acendendo */
  /* Mola que passa 4% do alvo (onboarding) */
  --mola: linear(0, .16 6%, .55 16%, .87 27%, 1.03 40%, 1.04 50%, 1.01 66%, 1);
  /* Mola que passa 8%: só pra coisa que cai na tela */
  --mola-forte: linear(0, .3 10%, .7 22%, 1.04 36%, 1.08 44%, 1.02 60%, 1);
  /* Saída suave, sem passar do alvo: revelação no scroll */
  --suave: cubic-bezier(.16, 1, .3, 1);
  --sobe: 14px;        /* distância da entrada */
}

@media (max-width: 720px) {
  :root { --calha: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-rapido: 0ms; --d-medio: 0ms; --d-lento: 0ms; --d-cena: 0ms; --passo: 0ms; --passo-painel: 0ms; --sobe: 0px; }
}