/**
 * Pague Azul Cliente - Sistema de design v2 (TOKENS)
 *
 * So vale dentro de <body class="pa-v2">. Paginas sem a classe nao mudam.
 * Tema: <html data-tema="claro|escuro"> (gravado no <head> antes da 1a pintura;
 * troca em assets/js/v2/tema.js). Sem o atributo = claro.
 * Cores da cidade: tema.js recalcula --v2-primaria* a partir de --pa-cor-primaria
 * (branding.js) com contraste AA nos dois temas.
 * Documentacao: .claude/context/knowledge/modules/app_cliente_design_v2.md
 *
 * Este arquivo tem SO tokens (cores, espacos, raios, tipo), a fonte Inter e a
 * transicao de troca de tema. Componentes reutilizaveis: componentes.css.
 * Ordem nas paginas: main.css -> tokens.css -> componentes.css -> {tela}.css
 */

/* Inter variavel (OFL, assets/lib/inter/OFL.txt) - local, sem CDN */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../../lib/inter/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../../lib/inter/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==================== TEMA CLARO (padrao) ==================== */
.pa-v2 {
  /* ---- Acento (padrao azul; tema.js troca pela cor da cidade) ----
     Texto na cor de acento usa -forte (contraste AA sobre fundo/superficie). */
  --v2-primaria: #2563EB;
  --v2-primaria-forte: #1D4ED8;
  --v2-primaria-profunda: #1E3A8A;
  --v2-primaria-tint: #EAF0FD;
  --v2-sobre-primaria: #FFFFFF;

  /* ---- Neutros ---- */
  --v2-fundo: #EEF0F4;
  --v2-superficie: #FCFCFD;
  --v2-superficie-2: #F1F2F5;        /* preenchimento neutro dentro de cartoes */
  --v2-neutro: rgba(17, 24, 39, 0.06); /* preenchimento neutro translucido: funciona sobre fundo E superficie */
  --v2-borda: rgba(17, 24, 39, 0.08); /* hairline */
  --v2-borda-forte: rgba(17, 24, 39, 0.14);
  --v2-texto-forte: #0E1525;          /* titulos e valores */
  --v2-texto: #1C2433;
  --v2-texto-suave: #5B6271;          /* >= 4.5:1 sobre fundo e superficie */
  --v2-skeleton: #E2E5EB;
  --v2-skeleton-brilho: rgba(255, 255, 255, 0.6);
  --v2-trilho: #ECEEF2;               /* trilho do anel */
  --v2-barra: rgba(252, 252, 253, 0.92);
  --v2-overlay: rgba(10, 14, 24, 0.42);
  --v2-toque: rgba(17, 24, 39, 0.05); /* fundo ao tocar em botao de icone */

  /* ---- Cartao de saldo (escuro nos dois temas) ---- */
  --v2-saldo-de: #1B2436;
  --v2-saldo-ate: #0F1626;
  --v2-saldo-borda: rgba(255, 255, 255, 0);
  --v2-saldo-texto: #F3F5F9;
  --v2-saldo-suave: rgba(243, 245, 249, 0.72);
  --v2-saldo-fantasma: rgba(255, 255, 255, 0.08);
  --v2-saldo-brilho: 0.28;            /* opacidade do brilho da cor de acento no canto */

  /* ---- Formularios e controles ---- */
  --v2-campo: #FFFFFF;                /* fundo de input/select/textarea */
  --v2-campo-borda: #D9DDE4;
  --v2-controle: #8B92A0;             /* borda de checkbox/radio/switch desligado (>= 3:1) */
  --v2-segmento-ativo: #FFFFFF;       /* aba selecionada do .pa-segmento */

  /* ---- Barra inferior: botao central "Estacionar" ---- */
  --v2-anel-central: #FCFCFD;         /* respiro em volta do circulo = cor da barra */
  --v2-sombra-central: 0 4px 10px -3px rgba(17, 24, 39, 0.28);

  /* ---- Placa Mercosul ---- */
  --v2-placa-fundo: #FFFFFF;
  --v2-placa-borda: #1C2433;
  --v2-placa-texto: #111827;

  /* ---- Estados do ticket (base = traco/icone; -texto = texto; -tint = fundo) ---- */
  --v2-sucesso: #16A34A;
  --v2-sucesso-texto: #127336;
  --v2-sucesso-tint: #E6F5EC;
  --v2-alerta: #D97706;
  --v2-alerta-texto: #A64B07;
  --v2-alerta-tint: #FCF0DF;
  --v2-erro: #DC2626;
  --v2-erro-texto: #B91C1C;
  --v2-erro-tint: #FBEAEA;
  --v2-sobre-estado: #FFFFFF;         /* glifo sobre a cor base (icones do toast) */

  /* ---- Espacamento (grade de 4) ---- */
  --v2-e1: 4px;
  --v2-e2: 8px;
  --v2-e3: 12px;
  --v2-e4: 16px;
  --v2-e5: 20px;
  --v2-e6: 24px;
  --v2-e8: 32px;

  /* ---- Raios ---- */
  --v2-r-sm: 12px;
  --v2-r-md: 16px;
  --v2-r-lg: 20px;
  --v2-r-xl: 24px;
  --v2-r-pill: 999px;

  /* ---- Sombras: quase nenhuma (hierarquia vem de borda, espaco e tipo) ---- */
  --v2-sombra-1: 0 1px 2px rgba(17, 24, 39, 0.04);
  --v2-sombra-3: 0 12px 32px -12px rgba(17, 24, 39, 0.22); /* so camadas flutuantes (toast, menu) */

  /* ---- Tipografia (12/14/16/20/28/36; pesos 400/500/600, 700 so no saldo) ---- */
  --v2-fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --v2-t-xs: 0.75rem;   /* 12 */
  --v2-t-sm: 0.875rem;  /* 14 */
  --v2-t-md: 1rem;      /* 16 */
  --v2-t-lg: 1.25rem;   /* 20 */
  --v2-t-xl: 1.75rem;   /* 28 */
  --v2-t-2xl: 2.25rem;  /* 36 */

  /* ---- Movimento ---- */
  --v2-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- Ponte com os componentes compartilhados (menu, modal, toast) ---- */
  --primary: var(--v2-primaria);
  --primary-dark: var(--v2-primaria-forte);
  --primary-light: var(--v2-primaria-tint);
  --background: var(--v2-fundo);
  --surface: var(--v2-superficie);
  --text-primary: var(--v2-texto);
  --text-secondary: var(--v2-texto-suave);
  --border: var(--v2-borda-forte);
  --error: var(--v2-erro-texto);
  --success: var(--v2-sucesso);
  --warning: var(--v2-alerta);

  font-family: var(--v2-fonte);
  color: var(--v2-texto);
  background: var(--v2-fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==================== TEMA ESCURO ==================== */
/* Paleta desenhada (nao invertida). Mesmos nomes de token: componentes nao mudam. */
html[data-tema="escuro"] { color-scheme: dark; background: #0C1019; }
html[data-tema="escuro"] .pa-v2 {
  --v2-primaria: #5E8EF7;             /* 4.9:1 sobre #1B2231; texto escuro 5.8:1 sobre ela */
  --v2-primaria-forte: #8DB0FA;
  --v2-primaria-profunda: #3F63B0;
  --v2-primaria-tint: #202D48;
  --v2-sobre-primaria: #0B1220;

  --v2-fundo: #0C1019;
  --v2-superficie: #141A26;
  --v2-superficie-2: #1B2231;
  --v2-neutro: rgba(255, 255, 255, 0.07);
  --v2-borda: rgba(255, 255, 255, 0.07);
  --v2-borda-forte: rgba(255, 255, 255, 0.12);
  --v2-texto-forte: #F1F4F9;
  --v2-texto: #E6EAF2;
  --v2-texto-suave: #9AA4B5;
  --v2-skeleton: #1C2331;
  --v2-skeleton-brilho: rgba(255, 255, 255, 0.05);
  --v2-trilho: #273042;
  --v2-barra: rgba(17, 22, 33, 0.92);
  --v2-overlay: rgba(0, 0, 0, 0.6);
  --v2-toque: rgba(255, 255, 255, 0.06);

  --v2-saldo-de: #1E2638;
  --v2-saldo-ate: #161C2A;
  --v2-saldo-borda: rgba(255, 255, 255, 0.07);
  --v2-saldo-texto: #F1F4F9;
  --v2-saldo-suave: rgba(241, 244, 249, 0.72);
  --v2-saldo-fantasma: rgba(255, 255, 255, 0.07);
  --v2-saldo-brilho: 0.22;

  --v2-campo: #1B2231;
  --v2-campo-borda: #2C3546;
  --v2-controle: #6B7588;
  --v2-segmento-ativo: #2A3344;

  --v2-anel-central: #111621;
  --v2-sombra-central: 0 4px 12px -3px rgba(0, 0, 0, 0.7);

  --v2-placa-fundo: #E3E6EB;          /* continua "branca", sem estourar no escuro */
  --v2-placa-borda: #0E1525;
  --v2-placa-texto: #0E1525;

  --v2-sucesso: #3CCB7F;
  --v2-sucesso-texto: #5EDB98;
  --v2-sucesso-tint: #13291F;
  --v2-alerta: #F2A93B;
  --v2-alerta-texto: #F6BD63;
  --v2-alerta-tint: #2E2313;
  --v2-erro: #F2655F;
  --v2-erro-texto: #FF8F89;
  --v2-erro-tint: #33181A;
  --v2-sobre-estado: #0B1220;

  --v2-sombra-1: none;
  --v2-sombra-3: 0 16px 40px -12px rgba(0, 0, 0, 0.7);
}

/* Troca de tema: transicao curta de cores (classe posta por TemaV2.definir por 400 ms) */
html.pa-tema-trocando .pa-v2,
html.pa-tema-trocando .pa-v2 *,
html.pa-tema-trocando .pa-v2 *::before,
html.pa-tema-trocando .pa-v2 *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    fill 0.3s ease, stroke 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease !important;
}


/* fase2-B: area do QR Code do PIX - BRANCA nos 2 temas (leitura pelos apps de banco) e texto escuro
   sobre ela. Mesmo valor no claro e no escuro (o bloco escuro acima nao redefine). */
.pa-v2 {
  --v2-qr-fundo: #FFFFFF;
  --v2-qr-texto: #0E1525;
}

/* marca por cidade: logo em imagem fica sobre fundo BRANCO nos 2 temas (logos sao desenhados para fundo claro) */
.pa-v2 {
  --v2-logo-fundo: #FFFFFF;
}