/* Conta do Bolo — tokens de design (v2, G1.5). Fonte única de cor, tipo, espaço, raio, sombra e motion.
   O dev-app copia este arquivo para app/css/ e troca os valores de :root do app.css pelos daqui.
   Contraste verificado (WCAG 2.x) em criativos/app/build/contraste.mjs; todo par texto/fundo usado abaixo passa de 4,5:1. */

/* Fontes (Google Fonts, licença OFL). Arquivos em criativos/marca/fontes/. Variáveis, só o subconjunto latino
   (cobre português do Brasil). Copiar para app/fonts/ e ajustar o caminho; o sw.js precisa guardá-las para o uso offline. */
@font-face { font-family: "Fraunces"; src: url("../fonts/Fraunces-sub.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-sub.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  /* Cor: base */
  --cb-creme: #FFFBF5;          /* fundo do app */
  --cb-surface: #FFFFFF;        /* cartões e campos */
  --cb-massa: #F1E0C5;          /* blocos de apoio, trilhas */
  --cb-massa-50: #F8EEDC;       /* superfície 2: chips, controle segmentado */
  --cb-linha: #E6D5BC;          /* filetes e bordas de cartão (decorativo) */
  --cb-borda-campo: #9C8571;    /* borda de campo e de controle: 3,5:1 sobre branco (WCAG 1.4.11) */
  /* Cor: texto */
  --cb-texto: #3B2A20;          /* chocolate: 13,2:1 sobre creme */
  --cb-texto-2: #5C4A3E;        /* apoio: 8,1:1 */
  --cb-texto-3: #7A6657;        /* dica e legenda: 5,3:1 (não usar abaixo de 14 px) */
  /* Cor: marca */
  --cb-chocolate-900: #2A1D15;  /* painéis escuros (cartão de resultado, rodapé) */
  --cb-terracota: #9A3F17;      /* botão, preço, links: 6,6:1 */
  --cb-terracota-600: #7F3211;  /* botão pressionado */
  --cb-terracota-100: #F6DFD2;  /* fundo de selo e foco leve */
  --cb-caramelo: #EFB35E;       /* destaque sobre chocolate escuro (8,8:1) e marca-texto; nunca texto sobre claro */
  --cb-caramelo-100: #FBE9C9;   /* selo "exemplo" */
  --cb-pessego: #F2B58F;        /* rótulo pequeno sobre chocolate escuro (9,2:1) */
  /* Cor: significado */
  --cb-ganho: #2F6B45;          /* "você ganha": 6,2:1 sobre creme */
  --cb-ganho-100: #E4F0DC;      /* fundo do selo de ganho (5,4:1 com o texto verde) */
  --cb-ganho-claro: #B9E4A4;    /* número de ganho sobre chocolate escuro (11,4:1) */
  --cb-erro: #A31515;
  --cb-foco: #1A56DB;           /* anel de foco: único azul do app, de propósito */

  /* Tipo */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-text: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.8125rem;   /* 13 px: só selos em caixa-alta */
  --fs-sm: 0.9375rem;   /* 15 px: dicas, legendas */
  --fs-md: 1.0625rem;   /* 17 px: texto base (html fica em 16 px) */
  --fs-lg: 1.25rem;     /* 20 px: título de cartão, botão grande */
  --fs-xl: 1.625rem;    /* 26 px: título de tela */
  --fs-2xl: 2.25rem;    /* 36 px: preço de cartão */
  --fs-hero: 3.5rem;    /* 56 px: o número de destaque do Resultado */

  /* Espaço (grade de 4; passos de 8 nos blocos) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --page-x: 20px;       /* margem lateral no celular */
  --tap: 56px;          /* altura mínima de botão e campo (a spec pede 48; 56 dá folga ao polegar) */

  /* Raio */
  --r-sm: 12px;         /* campo, chip */
  --r-md: 16px;         /* botão */
  --r-lg: 24px;         /* cartão */
  --r-xl: 32px;         /* cartão de resultado */
  --r-pill: 999px;

  /* Sombra (sempre quente: base chocolate, nunca cinza) */
  --sh-1: 0 1px 2px rgba(42, 29, 21, .06), 0 1px 1px rgba(42, 29, 21, .04);
  --sh-2: 0 2px 4px rgba(42, 29, 21, .05), 0 12px 28px rgba(42, 29, 21, .09);
  --sh-3: 0 28px 48px -16px rgba(42, 29, 21, .45);
  --sh-btn: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 8px 18px -6px rgba(154, 63, 23, .55);

  /* Motion */
  --ease: cubic-bezier(.22, .8, .24, 1);   /* saída suave */
  --t-fast: 140ms; --t-base: 260ms; --t-slow: 640ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}