/* =========================================================================
   TOKENS — as medidas do sistema. Nenhum valor visual nasce fora daqui.
   =========================================================================
   Regra de uso: componente NÃO inventa número. Se precisa de um valor que
   não está nesta lista, o valor entra aqui primeiro, com nome.

   Por que isso importa: antes desta pasta, o mesmo cartão tinha 0.5rem de
   canto numa tela e 0.4rem noutra, e havia 30 tamanhos de fonte diferentes
   no app. Nenhum deles estava errado sozinho — juntos é que faziam a tela
   parecer montada por pessoas diferentes.
   ========================================================================= */

:root {
    /* ── Forma ────────────────────────────────────────────────────────────
       O TETO É 3px. Vale para tudo: botão, campo, cartão, modal, etiqueta,
       imagem, caixa de aviso. Não existe elemento mais arredondado que este
       no sistema — nem circular, nem pílula. Quem precisar de canto reto usa
       0; nada entre 4px e o infinito é permitido, e a suíte reprova. */
    --raio: 3px;

    /* Altura de TODO controle clicável: campo, select, botão de texto e
       botão de ícone. Um número só, para o botão nunca sair menor que o
       campo ao lado — e porque 51,3px passa folgado do mínimo de toque de
       44px que o iOS pede. Mudar aqui muda o app inteiro. */
    --altura-controle: 2.85rem;

    /*
     * A altura do BOTÃO, separada da do campo.
     *
     * As duas eram a mesma, e no PC isso deixava todo botão com 51px — alto
     * demais para uma barra de ações, e com padding de sobra. Campo precisa de
     * área para o cursor e para o texto digitado; botão precisa caber o
     * rótulo.
     *
     * No CELULAR as duas voltam a ser iguais, logo abaixo: lá 44px é o mínimo
     * de toque do iPhone, e encolher botão vira erro de dedo.
     */
    --altura-botao: 1.95rem;   /* 35px na raiz de 18px */

    --borda-fina: 1px;
    /* A borda de DESTAQUE. Existe porque 1px não sustenta sozinho um estado
       selecionado: o cartão de mês escolhido precisava de um traço que se
       lesse a um metro da tela, e a alternativa que eu tinha usado — somar
       um box-shadow interno à borda — desenhava duas linhas quase juntas,
       que é o que faz uma borda parecer torta. Uma linha, mais grossa. */
    --borda-grossa: 2px;
    --sombra-suave: 0 1px 2px rgba(48, 56, 72, 0.06);
    --sombra-flutuante: 0 4px 16px rgba(48, 56, 72, 0.16);

    /* ── Espaço ───────────────────────────────────────────────────────────
       Escala de 4 em 4. Margem e padding saem daqui; o "0.35rem" que
       aparecia num lugar só era ruído, não intenção. */
    --e1: 0.25rem;   /*  4,5px */
    --e2: 0.5rem;    /*    9px */
    --e3: 0.75rem;   /* 13,5px */
    --e4: 1rem;      /*   18px */
    --e5: 1.5rem;    /*   27px */
    --e6: 2rem;      /*   36px */
    --e7: 3rem;      /*   54px */

    /* ── Tipografia ───────────────────────────────────────────────────────
       Bebas Neue Pro Expanded, servida pelo próprio servidor (@font-face em
       base.css). A pilha de reserva só desenha enquanto a fonte não chega. */
    --fonte-primaria: 'Bebas Neue Pro Expanded', 'Reserva Bebas', system-ui,
                      -apple-system, 'Segoe UI', sans-serif;

    /* Sete degraus, e nada entre eles. */
    --texto-xxs: 0.7rem;    /* 12,6px — selo, etiqueta, rótulo de cartão */
    --texto-xs: 0.78rem;    /* 14,0px — texto auxiliar denso */
    --texto-sm: 0.88rem;    /* 15,8px — apoio, legenda, meta */
    --texto-base: 1rem;     /* 18,0px — corpo e todo controle */
    --texto-md: 1.15rem;    /* 20,7px — título de bloco */
    --texto-lg: 1.4rem;     /* 25,2px — título de seção */
    --texto-xl: 1.6rem;     /* 28,8px — título de página */
    --texto-xxl: 2rem;      /* 36,0px — capa da ficha em modo leitura */

    --peso-normal: 400;
    --peso-medio: 500;
    --peso-forte: 700;
    --peso-extra: 800;

    /* Medida FÍSICA, não degrau da escala: abaixo de 16px o iOS dá zoom
       sozinho ao focar um campo, e a tela inteira salta. Os 20px são os 16
       do limite mais folga. Por ser imposição do aparelho, não acompanha a
       raiz tipográfica — está em px de propósito. */
    --toque-fonte-minima: 20px;

    --entrelinha: 1.5;
    --entrelinha-curta: 1.2;

    /* ── Cor ──────────────────────────────────────────────────────────────
       A primária é a única que a operação troca (Admin SaaS › Aparência);
       o header injeta o valor da vez sobre este padrão. */
    --cor-primaria: #4F3E80;
    --cor-primaria-hover: #3f3167;
    /* Fundo claro da marca. Faltava, e o cabeçalho do evento no PDF saía
       impresso sem fundo nenhum — a regra pedia uma variável inexistente. */
    --cor-primaria-clara: #efedf6;
    --cor-secundaria: #F27A62;
    --cor-secundaria-hover: #D9614A;

    --cor-texto-principal: #303848;
    --cor-texto-suave: #63708C;

    /* Superfícies: três degraus, do fundo da página ao realce discreto.
       Antes eram nove cinzas quase iguais (#f3f4f6, #f6f7f9, #f9fafb,
       #f1f3f6, #eef0f3…) — diferença que ninguém enxerga e todo mundo
       precisa manter. */
    --cor-fundo: #fdfbf7;
    --cor-superficie: #ffffff;
    --cor-superficie-2: #f6f7f9;
    --cor-superficie-3: #eef0f3;
    --cor-input-fundo: #ffffff;

    --cor-borda: #dcdde1;
    --cor-borda-suave: #e5e7eb;
    --cor-borda-media: #cfd3dc;      /* moldura de campo em foco, divisórias */
    --cor-borda-forte: #9ca3af;      /* estado ativo, arrastar */
    --cor-texto-fraco: #949ba6;      /* placeholder, item desativado */

    /* Feedback: fundo claro + texto escuro da mesma família, para o aviso
       ser legível sem virar bloco colorido. */
    --cor-sucesso: #336965;
    --cor-sucesso-fundo: #e6f2f1;
    --cor-sucesso-texto: #1f4d4a;
    --cor-erro: #e74c3c;
    --cor-erro-fundo: #fdecec;
    --cor-erro-texto: #b63629;
    --cor-aviso: #FFD980;
    --cor-aviso-fundo: #fff6e0;
    --cor-aviso-texto: #83560f;
    /* Botão que não dá para clicar.
       Cinza passou a significar UMA coisa no sistema: inativo. Por isso
       nenhum botão ATIVO nasce cinza — ação é roxa, destruição é vermelha —
       e quem está desligado usa estes dois, em toda parte. */
    --cor-desativado-fundo: #eceef2;
    --cor-desativado-texto: #9aa2b1;
    --cor-info: #3C6E71;
    --cor-info-fundo: #eef1fb;

    /* ── Camadas ──────────────────────────────────────────────────────────
       Quem sobe em quem. Número solto em z-index é como o app acabou com um
       calendário atrás da barra de topo. */
    /* As duas faixas de topo. São avisos do SISTEMA, não do produto: não
       acompanham a cor da conta, senão o alerta de "você está na conta de
       outra pessoa" ficaria parecido com o resto da tela. */
    --cor-faixa-copia: #7c2d12;
    --cor-faixa-suporte: #7f1d1d;

    --z-barra: 60;
    --z-flutuante: 70;
    --z-modal: 100;
    --z-toast: 120;
}

/*
 * Um só ponto de quebra: 768px.
 *
 * Abaixo dele o app é o de celular (é onde ele mais roda); acima, o de PC.
 * As poucas telas que precisavam de 480px, 340px ou 1100px foram resolvidas
 * com grade fluida em vez de mais um ponto de corte — cada ponto extra é uma
 * combinação a mais para conferir a cada mudança.
 */