/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                  SISTEMA JESSAMINE - CONTROLE DE CAIXA & CRM                       */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*  O QUE ESTE ARQUIVO FAZ:                                                           */
/*  Define todas as variaveis de cores, fontes, espacamentos e temas (Dark & Light)   */
/*  da aplicacao! Ao trocar a classe no <body>, todas as cores mudam suavemente       */
/*  sem quebrar o layout e sem gastar processador.                                    */
/*                                                                                    */
/*  VARIAVEIS PRINCIPAIS E O QUE CADA UMA FAZ:                                        */
/*  * '--bg-main': Cor de fundo da pagina inteira (Slate escuro ou neve suave).        */
/*  * '--bg-card': Fundo dos cartoes e paineis de KPI com efeito glassmorphism sutil.  */
/*  * '--text-main' e '--text-muted': Cores dos textos principais e secundarios.      */
/*  * '--primary': Azul/Indigo moderno para botoes de destaque e navegacao.          */
/*  * '--color-dinheiro', '--color-pix', '--color-card': Cores semanticas padronizadas */
/*    para cada modalidade de recebimento do caixa.                                   */
/*                                                                                    */
/*  LOGICA USADA E EXPLICACAO PASSO A PASSO:                                          */
/*  1. O tema padrao e o Dark Theme (:root), que economiza bateria em celulares OLED  */
/*     e reduz o cansaco visual de quem fica o dia inteiro olhando para a tela.       */
/*  2. Quando a classe 'light-theme' e adicionada ao <body>, as variaveis sao         */
/*     sobrescritas com uma paleta corporativa ultra clean com contraste WCAG AAA.     */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

:root {
  /* Paleta Dark Theme (Padrão de Alta Elegância) */
  --bg-main: #0a0f1d;
  --bg-surface: #111827;
  --bg-card: #1e293b;
  --bg-card-hover: #273549;
  --bg-glass: rgba(30, 41, 59, 0.7);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-focus: #3b82f6;

  --text-main: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  /* Cores de Identidade e Ação */
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --primary-glow: rgba(59, 130, 246, 0.3);

  /* Cores Semânticas das Modalidades do Caixa */
  --color-dinheiro: #10b981;  /* Esmeralda */
  --color-credito: #6366f1;   /* Indigo */
  --color-debito: #0ea5e9;    /* Sky Blue */
  --color-pix: #14b8a6;       /* Teal */
  --color-rec-av: #f59e0b;    /* Âmbar */
  --color-rec-card: #ec4899;  /* Pink */
  --color-rec-pix: #8b5cf6;   /* Purple */

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  /* Geometria e Sombras */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 9999px;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);

  /* Tipografia */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bottom-nav-height: 64px;
}

/* Tema Claro (Light Theme) */
body.light-theme {
  --bg-main: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --border-color: #e2e8f0;
  --border-focus: #2563eb;

  --text-main: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-glow: rgba(37, 99, 235, 0.2);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  transition: background-color 0.25s ease, color 0.25s ease;
  overflow-x: hidden;
}