/* DENGO — os tokens. Fonte única dos valores; nenhuma tela inventa cor nem tamanho.
 *
 * A PALETA: "Papel & Horta".
 * Território escolhido pra NÃO colidir com três vizinhos que já existem no cofre —
 * o "Golden" do site da Wanessa fotógrafa (terracota + âmbar), o "Almanaque da Fazenda" do
 * Celeiro (verde-oliva + palha) e o jogo CENOURA! (laranja #F07A1A sobre grama, pixel art).
 *
 * A regra que organiza tudo: o LARANJA existe só na cenoura e no botão gigante. Um elemento
 * laranja na tela — é isso que faz o botão ser gigante de verdade, não o tamanho em pixels.
 * Todo o resto é papel quente e verde-folha.
 */

:root {
  /* ── o papel ── */
  --papel:        #F4EDE1;   /* fundo. Não é branco: branco puro não existe em papel */
  --papel-fundo:  #EDE3D3;   /* o degrau abaixo, pro que afunda */
  --papel-alto:   #FBF6EE;   /* o degrau acima, pro que levanta (cartão) */
  --papel-linha:  #DCCFB9;   /* divisória de 1px */

  /* ── a tinta (texto) ── */
  --tinta:        #33402F;   /* verde tão escuro que lê como preto, mas não é #000 */
  --tinta-media:  #5D6B57;
  --tinta-fraca:  #8A9683;

  /* ── a folha (ação secundária, seleção, foco) ── */
  --folha:        #4F7A4A;
  --folha-clara:  #6F9C69;
  --folha-fundo:  #E3EBDD;

  /* ── a cenoura (a ÚNICA cor de ação principal) ── */
  --cenoura:        #E2701F;
  --cenoura-luz:    #F0913C;
  --cenoura-sombra: #B0511A;
  --cenoura-fundo:  #FBE8D6;

  /* ── acentos ── */
  --bochecha: #E8907F;   /* rosto da cenoura, e o coração do "recebi" */

  /* ── tipografia ──
   * NADA DE GOOGLE FONTS, e a escolha tem motivo duplo: a CSP é 'self' (liberar um domínio de
   * fonte abre uma porta que este app não precisa) e o primeiro carregamento é justamente o
   * momento da surpresa — esperar 120 KB de fonte pra ver a cenoura seria pagar caro pelo
   * instante que mais importa. Baixar e servir local resolveria a rede, mas ainda pesa.
   *
   * Então: duas famílias NATIVAS do iPhone, que é o aparelho dos dois. Iowan Old Style é uma
   * serifada de livro, desenhada pra leitura longa — nada a ver com Times. E o texto vai em
   * -apple-system (SF Pro), que é a fonte que eles já leem o dia inteiro.
   *
   * ⛔ Nem Inter, nem Roboto, nem Poppins fazendo tudo sozinha: é a assinatura nº 1 de
   * "gerado por IA" no catálogo do cofre. */
  --fonte-titulo: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --fonte-texto:  -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --t-gigante: clamp(2.6rem, 11vw, 3.6rem);
  --t-titulo:  clamp(1.5rem, 6vw, 2rem);
  --t-corpo:   1.0625rem;
  --t-miudo:   0.875rem;
  --t-legenda: 0.75rem;

  /* ── espaço ──
   * O respiro é vazio DENTRO da unidade, não entre elas (ele reprovou a leitura contrária em
   * 28/08/2026). Por isso a escala é generosa no padding e contida no gap. */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;

  /* ── forma ── */
  --r-pequeno: 10px;
  --r-medio:   16px;
  --r-grande:  24px;
  --r-pilula:  999px;

  /* ── movimento ──
   * Nunca `transition: all` (custa render e é assinatura de descuido). Só transform e opacity,
   * que o navegador compõe sem repintar. */
  --mov-rapido: 140ms cubic-bezier(.2, .7, .3, 1);
  --mov-calmo:  320ms cubic-bezier(.2, .7, .3, 1);
  --mov-mole:   620ms cubic-bezier(.34, 1.3, .48, 1);   /* o único com repique */

  /* ── sombra: papel sobre papel, nunca fumaça preta ── */
  --sombra-1: 0 1px 2px rgba(51, 64, 47, .07), 0 2px 8px rgba(51, 64, 47, .05);
  --sombra-2: 0 2px 4px rgba(51, 64, 47, .08), 0 8px 24px rgba(51, 64, 47, .08);
  --sombra-botao: 0 4px 0 var(--cenoura-sombra), 0 10px 22px rgba(176, 81, 26, .28);
}

/* Acabamento que quase todo app esquece, e que é o que faz parecer produto:
 * seleção, cursor de texto, barra de rolagem e anel de foco saem TODOS da paleta. */
::selection { background: var(--cenoura-fundo); color: var(--cenoura-sombra); }
:root { color-scheme: light; accent-color: var(--cenoura); caret-color: var(--cenoura); }
* { scrollbar-color: var(--papel-linha) transparent; scrollbar-width: thin; }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2.5px solid var(--folha);
  outline-offset: 3px;
  border-radius: var(--r-pequeno);
}

/* Números em coluna nunca dançam de largura. */
.num { font-variant-numeric: tabular-nums; }