/* Tokens da casca do eyye (chrome). As cores das telas testadas NÃO moram aqui:
   vêm do estado, como --t-* no wrapper .tela. */
:root {
  /* ── cor ── */
  --chrome-bg: #F4F4F3;
  --chrome-surface: #FFFFFF;
  --chrome-line: #E2E2DF;
  --chrome-text: #18181B;
  --chrome-muted: #55555C;
  --chrome-accent: #3F37C9;
  --chrome-on-accent: #FFFFFF;
  --chrome-ink: #18181B;
  --chrome-on-ink: #FAFAFA;
  --chrome-on-ink-muted: #B4B4BB;
  --chrome-on-ink-line: rgba(250, 250, 250, 0.2);
  --chrome-on-ink-ghost: rgba(250, 250, 250, 0.12);
  --chrome-veu: rgba(24, 24, 27, 0.4);
  --chrome-vidro: rgba(255, 255, 255, 0.64); /* barra flutuante: a página passa por baixo, embaçada */
  --chrome-sobre: rgba(24, 24, 27, 0.04); /* hover: camada por cima de qualquer fundo (inset box-shadow) */
  --chrome-aperto: rgba(24, 24, 27, 0.08); /* pressionado */

  /* ── auditor ── */
  --pin-fail: #B42318;
  --pin-fail-soft: #FEE4E2;
  --pin-on-fail: #FFFFFF;
  --pin-pass: #067647;
  --pin-warn: #B54708;
  --pin-warn-soft: #FEF0C7;
  --pin-on-warn: #FFFFFF;
  --pin-fail-on-ink: #FDA29B;
  --pin-pass-on-ink: #75E0A7;

  /* ── tipografia ── */
  --font-ui: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --fs-12: 12px;
  --lh-12: 16px;
  --fs-16: 16px;
  --lh-16: 24px;
  --fs-40: 40px;
  --lh-40: 48px;

  /* ── espaço ── */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;
  --s-64: 64px;
  --s-96: 96px;

  /* ── raio ── */
  --r-4: 4px;
  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-phone: 40px;

  /* ── layout ── */
  --w-seletor: 320px;
  --h-pilula: 48px; /* 16 + 16 de texto + 8×2 */
  --w-pilula: 112px; /* largura fixa da pílula na barra (a barra fica do tamanho do conteúdo) */
  --h-lista-fontes: 216px; /* 5 linhas de 40 (24 + 8×2) + 4 gaps de 4 */
  --w-dica: 280px;
  --w-modal: 880px;
  --h-codigo: 360px;
  --w-auditor: 340px;
  --w-kit-indice: 192px;
  --w-kit-texto: 720px;
  --phone-w: 390px;
  --phone-h: 844px;
  --h-folha-espiada: 104px; /* folha recolhida no celular: alça 24 + 12 + abas de modo 56 + 12 */

  /* ── elevação ── */
  --shadow-flutua: 0 16px 40px rgba(24, 24, 27, 0.16);
  --shadow-phone: 0 24px 48px rgba(24, 24, 27, 0.2);
  --shadow-sheet: 0 -8px 24px rgba(24, 24, 27, 0.12);
  --blur-vidro: 16px;

  /* ── movimento ── (só a casca anima; as telas testadas nunca) */
  --dur-toque: 80ms; /* pressionado */
  --dur-curta: 160ms; /* estado, indicador do selecionado, saída de painel */
  --dur-painel: 240ms; /* painel entrando, palco se reacomodando */
  --dur-folha: 320ms; /* folha do celular abrindo e recolhendo */
  --curva-entra: cubic-bezier(0.2, 0, 0, 1);
  --curva-sai: cubic-bezier(0.3, 0, 1, 1);
  --curva-move: cubic-bezier(0.4, 0, 0.2, 1);
  --sobe-pilula: calc(var(--s-4) * -1); /* pílula no hover */
}