/* ============================================================================
   AgendaAí — TOKENS. A única fonte de verdade visual do site do produto.

   🎯 De onde vem: do PAINEL (apps/studio/public/admin/css/admin.css), não da
   vitrine. A vitrine veste a marca de cada estúdio (rosé/dourado, e muda por
   tenant); o painel é o produto — e o site que vende o produto tem que ser
   reconhecivelmente a mesma coisa que a pessoa vai usar depois de assinar.
   Os valores de cor abaixo são os MESMOS já verificados em WCAG AA no painel
   (scripts/teste-painel-tokens.js). Não foram reescolhidos "no olho".

   O que este arquivo acrescenta ao painel: escala tipográfica fluida, escala de
   espaço, e a LINGUAGEM DE MOVIMENTO (§F do plano) — que o painel não tem
   porque painel não conta história, executa tarefa.
   ============================================================================ */

:root {
  /* ---------------------------------------------------------------- cor --- */
  /* Claro. Idênticos ao painel: mudar aqui sem mudar lá quebra a continuidade
     visual entre "o site que me vendeu" e "o produto que eu uso". */
  --bg: #F6F7F9;
  --bg-soft: #EEF0F4;
  --surface: #FFFFFF;
  --surface-2: #F3F4F8;
  --text: #1A1C23;          /* 15,9:1 sobre --bg */
  --muted: #5D6470;         /* 6,0:1 sobre --surface */
  --line: #E3E6EC;

  --acento: #4F46B8;        /* 7,2:1 com branco em cima */
  --acento-forte: #3E38A0;  /* hover · 9,2:1 */
  --acento-txt: #4F46B8;    /* o acento COMO TEXTO */
  --acento-soft: #EDECFB;   /* fundo suave do acento */
  --ouro: #8A6A26;          /* acento secundário raro (valor, destaque) */

  --ok: #1F7A4D;   --ok-bg: #E3F2EA;
  --warn: #8A5A0B; --warn-bg: #FAF0DC;
  --err: #B3261E;  --err-bg: #FBEAE9;
  --off: #7A7F8A;  --off-bg: #ECEEF2;

  --shadow-sm: 0 1px 3px rgba(23, 25, 35, .07);
  --shadow: 0 8px 28px rgba(23, 25, 35, .09);
  --shadow-lg: 0 24px 64px rgba(23, 25, 35, .14);

  /* ------------------------------------------------------------ tipo ----- */
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter',
          'Helvetica Neue', Arial, sans-serif;
  /* Números tabulares para valor/hora: sem isso, um contador de R$ "dança"
     de largura a cada dígito e o olho lê como instabilidade, não como cálculo. */
  --num: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Escala fluida. clamp() com vi (não vw) para não estourar quando a barra de
     rolagem existe. O mínimo é o do celular de 320px; o máximo, o do 1920. */
  /* Os máximos foram REBAIXADOS depois de medir em tela (04/08): com 5,5rem o
     h1 ocupava a primeira dobra inteira num 1440×900 e empurrava o botão para
     fora dela. Título que não deixa o CTA aparecer não é ousadia tipográfica,
     é erro de conversão. */
  --t-display: clamp(2.375rem, 1.5rem + 3.4vi, 4rem);
  --t-h1: clamp(1.875rem, 1.3rem + 2.2vi, 2.75rem);
  --t-h2: clamp(1.5rem, 1.15rem + 1.4vi, 2rem);
  --t-h3: clamp(1.125rem, 1rem + .6vi, 1.375rem);
  --t-corpo: clamp(1rem, .96rem + .2vi, 1.125rem);
  --t-peq: .875rem;
  --t-micro: .75rem;

  --lh-apertado: 1.05;   /* títulos grandes */
  --lh-titulo: 1.18;
  --lh-corpo: 1.6;

  /* ----------------------------------------------------------- espaço ---- */
  --e1: .25rem;  --e2: .5rem;   --e3: .75rem;  --e4: 1rem;
  --e5: 1.5rem;  --e6: 2rem;    --e7: 3rem;    --e8: 4rem;
  --e9: 6rem;    --e10: 8rem;

  /* Respiro vertical entre atos. Grande de propósito (§4 do briefing: "muito
     espaço respirável"), mas fluido — 8rem no celular seria desperdício de
     rolagem numa tela de 640px de altura. */
  --ato-y: clamp(4rem, 2rem + 9vi, 9rem);

  --raio-sm: 10px;
  --raio: 14px;
  --raio-lg: 22px;
  --raio-full: 999px;

  --maxw: 1200px;
  --maxw-texto: 34rem;   /* ~68 caracteres: o limite de leitura confortável */

  /* --------------------------------------------------------- movimento --- */
  /* §F do plano: quatro faixas, e nada fora delas. Uma animação que não cabe
     em nenhuma destas durações é uma animação que não sabe o que está fazendo. */
  --mo-micro: 140ms;      /* feedback de toque/hover */
  --mo-ui: 260ms;         /* estado de componente */
  --mo-bloco: 520ms;      /* entrada de seção */
  --mo-narrativa: 1200ms; /* a cascata */

  --ease-saida: cubic-bezier(.2, .8, .2, 1);   /* entra rápido, assenta devagar */
  --ease-firme: cubic-bezier(.4, 0, .2, 1);    /* transformação de estado */
  --ease-entrada: cubic-bezier(.4, 0, 1, 1);   /* saída de tela */
}

/* Escuro segue o aparelho… */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101117; --bg-soft: #161822; --surface: #191B24; --surface-2: #20232E;
    --text: #ECEDF2;        /* 16,1:1 sobre --bg */
    --muted: #9AA0AE;       /* 6,6:1 sobre --surface */
    --line: #2A2E3B;
    --acento: #5B51D8;      /* 5,8:1 com branco em cima */
    --acento-forte: #4A41C4;
    --acento-txt: #A5A0F2;  /* 7,3:1 sobre --surface */
    --acento-soft: #232037;
    --ouro: #D4B878;
    --ok: #6FCF9B; --ok-bg: #1C2E24;
    --warn: #E0B06A; --warn-bg: #33291A;
    --err: #F2827C; --err-bg: #37201F;
    --off: #8A8F9A; --off-bg: #262933;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
    --shadow: 0 8px 28px rgba(0, 0, 0, .45);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, .6);
  }
}
/* …e o botão de tema força nos dois sentidos (mesmo mecanismo do painel). */
:root[data-tema='claro'] {
  --bg: #F6F7F9; --bg-soft: #EEF0F4; --surface: #FFFFFF; --surface-2: #F3F4F8;
  --text: #1A1C23; --muted: #5D6470; --line: #E3E6EC;
  --acento: #4F46B8; --acento-forte: #3E38A0; --acento-txt: #4F46B8;
  --acento-soft: #EDECFB; --ouro: #8A6A26;
  --ok: #1F7A4D; --ok-bg: #E3F2EA; --warn: #8A5A0B; --warn-bg: #FAF0DC;
  --err: #B3261E; --err-bg: #FBEAE9; --off: #7A7F8A; --off-bg: #ECEEF2;
  --shadow-sm: 0 1px 3px rgba(23,25,35,.07); --shadow: 0 8px 28px rgba(23,25,35,.09);
  --shadow-lg: 0 24px 64px rgba(23,25,35,.14);
}
:root[data-tema='escuro'] {
  --bg: #101117; --bg-soft: #161822; --surface: #191B24; --surface-2: #20232E;
  --text: #ECEDF2; --muted: #9AA0AE; --line: #2A2E3B;
  --acento: #5B51D8; --acento-forte: #4A41C4; --acento-txt: #A5A0F2;
  --acento-soft: #232037; --ouro: #D4B878;
  --ok: #6FCF9B; --ok-bg: #1C2E24; --warn: #E0B06A; --warn-bg: #33291A;
  --err: #F2827C; --err-bg: #37201F; --off: #8A8F9A; --off-bg: #262933;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 8px 28px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.6);
}

/* ============================ reset enxuto =============================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
  /* §28: nada pode gerar rolagem horizontal. Isto é a rede de segurança, não
     a solução — cada bloco ainda tem que caber sozinho. */
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

/* Foco visível SEMPRE. Mesma regra do painel: produto que some com o foco
   exclui quem navega por teclado e reprova em qualquer auditoria séria. */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* Pular para o conteúdo — primeiro tab da página, invisível até receber foco. */
.pular {
  position: absolute; left: var(--e4); top: var(--e4); z-index: 100;
  background: var(--acento); color: #fff; padding: var(--e3) var(--e4);
  border-radius: var(--raio-sm); transform: translateY(-200%);
  transition: transform var(--mo-ui) var(--ease-saida);
}
.pular:focus { transform: translateY(0); }

/* Só para leitor de tela. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ======================= movimento reduzido ==============================
   §21: a experiência continua excelente sem animação. Aqui o corte é REAL —
   as durações vão a ~0 e os estados FINAIS permanecem. A cascata continua
   acontecendo (é ela que explica o produto), só que instantânea e por passos.
   Nada de `animation: none`, que deixaria elementos presos no estado inicial
   e a página pela metade. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mo-micro: 1ms; --mo-ui: 1ms; --mo-bloco: 1ms; --mo-narrativa: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================ utilitários ================================ */
.env { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--e5); }
@media (max-width: 480px) { .env { padding-inline: var(--e4); } }

.texto-medida { max-width: var(--maxw-texto); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }