/**
 * Design Tokens — Modo Cliente (FRONT-002)
 *
 * Única fonte de verdade visual do modo cliente. Valores de cor reaproveitam
 * por VALOR os tokens já em produção em public/assets/css/app.css (--verde,
 * --roxo, --amarelo, --azul-claro, --sidebar-fundo) — nao é uma marca nova,
 * é uma evolução do mesmo sistema, conforme FRONT-001A_DESIGN_SYSTEM.md e
 * confirmado visualmente em mockup/front_oficial/42_design_system.png.
 *
 * Raio de botão em pílula (999px) é um delta INTENCIONAL em relação ao
 * `.botao` administrativo (10px) — ver FRONT-001B_RELATORIO.md secção 17.
 */
:root {
  /* ---------- Cores de marca ---------- */
  --cliente-verde: #16A34A;
  --cliente-verde-hover: #15803D;
  --cliente-verde-escuro: #15803D;
  --cliente-roxo: #7C3AED;
  --cliente-azul: #1E3A8A;
  --cliente-azul-claro: #3B82F6;
  --cliente-amarelo: #F59E0B;

  /* ---------- Cores semânticas ---------- */
  --cliente-sucesso: #22C55E;
  --cliente-atencao: #F59E0B;
  --cliente-erro: #EF4444;
  --cliente-info: #3B82F6;

  /* ---------- Superfícies ---------- */
  --cliente-fundo-escuro: #0F172A;
  --cliente-fundo-escuro-secundario: #111C34;
  --cliente-fundo-claro: #F1F5F9;
  --cliente-superficie-clara: #FFFFFF;
  --cliente-superficie-escura: #111C34;

  /* ---------- Texto ---------- */
  --cliente-texto-claro-principal: #FFFFFF;
  --cliente-texto-claro-secundario: #94A3B8;
  --cliente-texto-escuro-principal: #0F172A;
  --cliente-texto-escuro-secundario: #64748B;

  /* ---------- Bordas / divisórias ---------- */
  --cliente-borda-clara: #CBD5E1;
  --cliente-borda-escura: #1E293B;
  --cliente-divisoria-clara: #E2E8F0;
  --cliente-divisoria-escura: rgba(255, 255, 255, .08);
  --cliente-overlay: rgba(15, 23, 42, .55);

  /* ---------- Tipografia ---------- */
  --cliente-fonte: 'Segoe UI', 'Poppins', Arial, sans-serif;

  --cliente-fs-display: 28px;
  --cliente-fs-titulo-pagina: 19px;
  --cliente-fs-titulo-secao: 15px;
  --cliente-fs-titulo-card: 14px;
  --cliente-fs-corpo: 13px;
  --cliente-fs-corpo-pequeno: 12px;
  --cliente-fs-legenda: 11px;
  --cliente-fs-botao: 14px;
  --cliente-fs-valor: 17px;
  --cliente-fs-badge: 11px;

  --cliente-fw-regular: 400;
  --cliente-fw-semibold: 600;
  --cliente-fw-bold: 700;
  --cliente-fw-black: 800;

  --cliente-lh-titulo: 1.2;
  --cliente-lh-corpo: 1.5;
  --cliente-lh-legenda: 1.4;

  /* ---------- Espaçamento (escala base 4px) ---------- */
  --cliente-space-1: 4px;
  --cliente-space-2: 8px;
  --cliente-space-3: 12px;
  --cliente-space-4: 16px;
  --cliente-space-5: 18px;
  --cliente-space-6: 20px;
  --cliente-space-7: 24px;
  --cliente-space-8: 32px;

  --cliente-margem-lateral-mobile: 18px;
  --cliente-gap-cards: 12px;
  --cliente-gap-secao: 22px;

  /* Área segura (notch / gesture bar) — usada em conjunto com env(safe-area-inset-*) */
  --cliente-safe-top: env(safe-area-inset-top, 0px);
  --cliente-safe-bottom: env(safe-area-inset-bottom, 0px);
  --cliente-safe-left: env(safe-area-inset-left, 0px);
  --cliente-safe-right: env(safe-area-inset-right, 0px);

  /* ---------- Raios ---------- */
  --cliente-raio-botao: 999px;
  --cliente-raio-chip: 999px;
  --cliente-raio-badge: 999px;
  --cliente-raio-card: 16px;
  --cliente-raio-card-grande: 20px;
  --cliente-raio-campo: 12px;
  --cliente-raio-modal: 20px;

  /* ---------- Sombras ---------- */
  --cliente-sombra-card: 0 1px 2px rgba(15, 23, 42, .06);
  --cliente-sombra-flutuante: 0 12px 30px rgba(15, 23, 42, .18);
  --cliente-sombra-modal: 0 24px 70px rgba(15, 23, 42, .28);

  /* ---------- Transições ---------- */
  --cliente-transicao-rapida: 120ms ease;
  --cliente-transicao-padrao: 200ms ease;
  --cliente-transicao-lenta: 320ms ease;

  /* ---------- Larguras máximas ---------- */
  --cliente-largura-mobile: 430px;
  --cliente-largura-conteudo-desktop: 1040px;
  --cliente-largura-pagina-desktop: 1280px;

  /* ---------- Alturas ---------- */
  --cliente-altura-botao: 44px;
  --cliente-altura-botao-pequeno: 34px;
  /* FRONT-008 — corrigido para o valor real medido de `.cliente-nav-mobile`
     (padding + ícone + texto), que nunca respeitava este token porque nada
     o usava como min-height; ver FRONT-008_RELATORIO.md, secção Navegação. */
  --cliente-altura-nav-mobile: 75px;
  --cliente-altura-nav-desktop: 68px;
  /* FRONT-009 — corrigido de 40px para 44px (alvo de toque mínimo
     recomendado, WCAG 2.5.5/2.5.8) — ressalva registrada na aprovação da
     FRONT-008. Ver FRONT-009_RELATORIO.md, secção Áreas de toque. */
  --cliente-altura-toque-minima: 44px;

  /* ---------- Z-index (escala documentada, não espalhar valores soltos) ---------- */
  --cliente-z-nav: 100;
  --cliente-z-header: 110;
  --cliente-z-overlay: 200;
  --cliente-z-modal: 210;
  --cliente-z-bottom-sheet: 210;
  --cliente-z-toast: 300;

  /*
   * Breakpoint documentado (não pode ser lido dentro de @media — CSS custom
   * properties não funcionam em media queries; os valores reais usados nas
   * regras @media em responsive.css DEVEM espelhar exatamente estes números).
   * --cliente-bp-mobile-min: 320px;
   * --cliente-bp-mobile-max: 430px;
   * --cliente-bp-tablet: 768px;
   * --cliente-bp-desktop: 1024px;   <- navegação muda de bottom-nav para desktop-nav aqui
   * --cliente-bp-desktop-grande: 1280px;
   * --cliente-bp-desktop-xl: 1440px;
   */
}