/* ==========================================================
   TEMA: Letrar (design system da Assistente IA / Kit Devolutiva / Kit 7 Avaliações)
   Valores lidos do CSS real do site em set/2026 (não do tokens.json antigo, que tem fontes erradas).
   Carregado DEPOIS do base.css. Só define variáveis; a estrutura fica no base.css.
   Fontes: ver fontes.html (o nova-pagina.ps1 cola no index.html).
   ========================================================== */

:root {
  /* ---- Cores por papel ---- */
  --surface: #ffffff;            /* fundo da página */
  --surface-raised: #fdfdfd;     /* cartões sobre o fundo */
  --surface-tint: #f3edf4;       /* fundo de ícone, selo e vídeo carregando */
  --surface-oferta: #f3e6ff;     /* faixa de fundo da seção de oferta */
  --surface-vidro: rgba(255,255,255,.6); /* cartão da oferta */
  --ink: #000000;                /* todo o texto */
  --brand: #7c76e7;              /* cor de ação da marca */
  --on-brand: #ffffff;           /* texto sobre --brand (3,7:1 medido: só corpo grande ou negrito) */
  --accent: #7a4c9a;             /* detalhe: barra do cartão, ícones, foco */
  --success: #00b60e;            /* check das listas */
  --on-success: #ffffff;         /* traço do check */
  --hairline: #c6c6c6;           /* contorno de 1 px */
  --hairline-brand: rgba(124,118,231,.3); /* contorno do cartão da oferta */

  /* ---- Cores dos componentes (por padrão seguem a marca) ---- */
  --faixa-bg: var(--brand);
  --faixa-fg: var(--on-brand);
  --botao-bg: var(--brand);
  --botao-fg: var(--on-brand);
  --botao-oferta-bg: var(--success);   /* botão da oferta em verde, como na página da Assistente IA */
  --botao-oferta-fg: var(--on-brand);
  --preco-cor: var(--brand);           /* o número do preço na oferta */
  --play-bg: #ffffff;                  /* ícone de play dos vídeos de depoimento */
  --play-fg: var(--brand);

  /* ---- Fontes ---- */
  --font-display: 'Instrument Serif', 'Playfair Display', Georgia, serif;
  --font-text: 'Quicksand', system-ui, sans-serif;
  --font-botao: 'Poppins', system-ui, sans-serif;

  /* ---- Tipografia (celular; o desktop está no fim do arquivo) ---- */
  --h-weight: 400;               /* título nunca em negrito: o peso vem do tamanho */
  --h-tracking: -0.05em;
  --h1-size: 51px;   --h1-line: 41.8px;
  --h2-size: 40px;   --h2-line: 38px;
  --rotulo-size: 20px; --rotulo-line: 26px;
  --faixa-size: 20px; --faixa-line: 24px; --faixa-weight: 400; --faixa-tracking: 0;
  --faixa-padding: 1px 3px;
  --faixa-border: 0;
  --apoio-size: 15px; --apoio-line: 16.5px;
  --corpo-size: 15px; --corpo-line: 18px; --corpo-tracking: -0.05em;
  --pequeno-size: 15px; --pequeno-line: 18px;  /* texto pequeno: selo de formato (não cresce no desktop) */
  --botao-size: 15px; --botao-tracking: 0.05em;
  --botao-oferta-size: 17px;
  --preco-size: 31px; --preco-line: 34.1px;
  --marca-size: 34px; --marca-line: 36px;

  /* ---- Espaçamento ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --container: 1200px;

  /* ---- Cantos e sombra ---- */
  --radius-faixa: 0;             /* canto reto: é o que faz a faixa parecer marca-texto */
  --radius-botao: 20px;
  --radius-md: 12px;             /* cartões e molduras */
  --radius-lg: 30px;             /* cartão da oferta */
  --shadow-card: 0 2px 10px rgba(0,0,0,.16);
}

@media (min-width: 768px) {
  :root {
    --h1-size: 80px;   --h1-line: 66px;
    --h2-size: 60px;   --h2-line: 56px;
    --faixa-size: 25px; --faixa-line: 31px;
    --apoio-size: 18px; --apoio-line: 19.8px;
    --corpo-size: 18px; --corpo-line: 21.6px;
    --preco-size: 65px; --preco-line: 71.5px;
  }
}

/* ==========================================================
   VÁLVULA DE ESCAPE (último recurso): se o design system exigir algo que as variáveis não cobrem,
   sobrescreva o componente aqui, e só aqui. O Letrar não precisa de nada.
   ========================================================== */