/* ==========================================================================
   Qual a Peca? - Tokens de design
   --------------------------------------------------------------------------
   Este arquivo guarda os VALORES do sistema visual: cores, fontes e medidas.
   Ele nao estiliza nada sozinho. Quem usa estes valores e o base.css e as
   telas.

   Regra: nenhuma cor ou medida do sistema deve ser escrita "solta" em outro
   arquivo. Se precisar de um valor novo, ele nasce aqui primeiro.
   ========================================================================== */

/* Fontes do Google Fonts.
   Newsreader (serifada) pesos 300/400/500 + italico 400.
   Archivo (sem serifa) pesos 400/500/600/700.
   Precisa ser a primeira linha do arquivo: @import so vale se vier antes de
   qualquer regra de estilo. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Newsreader:ital,wght@0,300;0,400;0,500;1,400&display=swap');

:root {
  /* ---- Cores (CLAUDE.md) ------------------------------------------------ */
  --borgonha: #7A1C24;        /* primaria, CTAs, destaques */
  --tinta: #241614;           /* texto forte, hover de botao */
  --dourado: #E8D9B0;         /* barra de acento, label sobre borgonha */
  --dourado-escuro: #B8862B;  /* borda de alerta, pulo do gato */
  --creme: #FAF7F0;           /* fundo da pagina */
  --creme-claro: #FDFAF4;     /* fundo da folha de resposta */
  --branco: #FFFFFF;          /* cartoes */
  --areia: #F4EEE3;           /* bloco de alternativas no mobile */
  --pulo-fundo: #F6EDE2;
  --pulo-texto: #8A6520;
  --pulo-corpo: #4A3A26;
  --borda: #E6DFD0;
  --borda-interna: #EDE7DB;
  --borda-campo: #DDD3C4;
  --texto-2: #4A423A;         /* secundario */
  --texto-3: #8B8070;         /* labels, terciario */
  --texto-off: #BDB2A4;       /* placeholder */

  /* ---- Cores complementares (README do handoff) ------------------------- */
  /* Nao estao no bloco do CLAUDE.md, mas a especificacao completa as usa.
     Vao fazer falta nas telas de treino, checkout e assinatura. */
  --creme-escuro: #EFE9DC;    /* fundo fora do aparelho / desk */
  --descartada: #F2EAE0;      /* alternativa errada marcada */
  --desabilitado: #EBE1D4;    /* fundo de botao desabilitado */
  --texto-off-2: #A79B8B;     /* placeholder alternativo, status rascunho */
  --sobre-borgonha: #E3C9C0;  /* corpo de texto sobre fundo borgonha */
  --sobre-tinta: #BBA79C;     /* corpo de texto sobre fundo tinta */
  --sobre-tinta-forte: #F0E2D8; /* texto de mais destaque sobre tinta */
  --sobre-escuro: #F7F1E4;    /* titulo e texto forte sobre borgonha ou tinta */
  --borda-descartada: #C9B9A8; /* borda da alternativa errada que foi marcada */
  --creme-secao: #F4EFE5;     /* fundo das secoes alternadas da landing */
  --texto-link: #5C534A;      /* link de navegacao e de rodape */
  --texto-4: #A09383;         /* nota discreta, menor que o terciario */
  --ouro-fraco: #C3AC9B;      /* numeros de passo, barra de acento neutra */
  --borda-selo: #E0CDBE;      /* borda do selo do hero */
  --descritor: #D8B9A8;       /* descritor da marca sobre borgonha */
  --borda-sobre-borgonha: #C99A93; /* contorno de botao sobre borgonha */
  --borda-sobre-tinta: #6B5148;    /* contorno de botao sobre tinta */
  --sobre-borgonha-fraco: #DCC0B6; /* texto de apoio sobre borgonha */
  --texto-1: #3E362E;         /* corpo de texto de leitura atenta */
  --texto-opcional: #6E6558;  /* texto de item opcional, mais leve que o corpo */
  --secao-acento: #B0836A;    /* etiqueta "Secao N" dos documentos legais */
  --creme-rodape: #F3ECE0;    /* fundo do rodape do site */
  --preencher-fundo: #F6E7C9; /* campo pendente de preenchimento */
  --preencher-texto: #6B4E12; /* texto do campo pendente */

  /* ---- Banner de cookies (barra tinta sobre o rodape da tela) ----------- */
  --banner-corpo: #D8C9BF;    /* paragrafo do banner */
  --banner-nota: #A2938A;     /* linha de "saiba mais" */
  --banner-borda: #6B5850;    /* contorno dos botoes secundarios */
  --banner-botao: #E5D5CB;    /* texto dos botoes secundarios */
  --banner-link-borda: #7A6055; /* sublinhado dos links do banner */
  --borda-interruptor: #B5A493; /* contorno do interruptor desligado */

  /* ---- Tipografia ------------------------------------------------------- */
  --fonte-serifa: 'Newsreader', Georgia, 'Times New Roman', serif;
  --fonte-ui: 'Archivo', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Espacamento entre letras. Newsreader pede valor negativo. */
  --ls-titulo: -0.03em;
  --ls-subtitulo: -0.02em;
  --ls-label: 0.18em;         /* labels de secao, entre 0.16em e 0.2em */

  /* Altura de linha */
  --lh-titulo: 1.12;
  --lh-corpo: 1.55;
  --lh-longo: 1.65;

  /* ---- Medidas ---------------------------------------------------------- */
  /* Larguras maximas de coluna, por tipo de tela */
  --largura-form: 460px;      /* formularios de acesso */
  --largura-treino: 760px;    /* sessao de treino, onboarding */
  --largura-checkout: 900px;  /* checkout, historico, editor */
  --largura-lista: 1080px;    /* banco de casos, listagens */
  --largura-landing: 1360px;  /* pagina de venda, unica tela mais larga */
  --largura-legal: 880px;     /* documentos legais, coluna de leitura longa */

  /* Respiro da pagina. clamp() = valor minimo, ideal e maximo: encolhe
     sozinho na tela pequena sem precisar de media query. */
  --pad-pagina-x: clamp(16px, 4vw, 28px);
  --pad-pagina-y: clamp(32px, 5vw, 56px);
  --pad-cartao: 26px;         /* interno de cartao, faixa de 22 a 30px */

  /* Distancias entre elementos */
  --gap-alternativas: 8px;
  --gap-cartoes: 14px;
  --gap-secoes: 24px;

  /* Barra de acento colada a esquerda do bloco */
  --acento-cartao: 8px;
  --acento-alerta: 4px;

  /* Sombra: unica permitida. Dura e deslocada, nunca difusa. */
  --sombra-dura: 8px 8px 0 rgba(122, 28, 36, 0.08);

  /* Alvo de toque no mobile */
  --toque-min: 48px;
  --toque-cta: 54px;
}