/* =====================================================================
   AquaSmart — tokens de design
   ---------------------------------------------------------------------
   ÚNICO arquivo onde cor, espaçamento, raio, sombra e tamanho nascem.
   Componentes e páginas só consomem estas variáveis.

   Regras do sistema:
     - espaçamento em múltiplos de 4;
     - controles (botão, campo) com 44 px de altura; versão compacta 36 px;
     - raio 10 px em controles, 16 px em cartões;
     - escala tipográfica: 12, 13, 14, 16, 18, 20, 24, 32, 40, 48.

   Os nomes antigos (--cor-*, --esp-*, --texto-*) continuam valendo: o
   gráfico gerado no servidor e alguns estilos em linha dependem deles.
   ===================================================================== */

:root {
  color-scheme: light;

  /* ------------------------------------------------------- Espaçamento */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-8: 32px;
  --esp-10: 40px;
  --esp-12: 48px;
  --esp-16: 64px;
  --esp-20: 80px;

  /* ------------------------------------------------------------ Raios */
  --raio-botao: 10px;
  --raio-campo: 10px;
  --raio-card: 16px;
  --raio-pequeno: 6px;
  --raio-pilula: 999px;

  /* ---------------------------------------------------------- Medidas */
  --altura-controle: 44px;
  --altura-controle-pequeno: 36px;
  --largura-lateral: 264px;
  --altura-barra: 64px;
  --altura-acesso-rapido: 64px;
  --altura-rodape: 48px;          /* rodapé fixo no pé da janela, em todas as telas */
  --area-segura-inferior: env(safe-area-inset-bottom, 0px);
  --largura-conteudo: 1440px;
  --largura-site: 1240px;
  --largura-leitura: 720px;
  --largura-card: 380px;
  --largura-formulario: 440px;   /* compatibilidade */
  --largura-media: 720px;        /* compatibilidade */
  --largura-voltar: 360px;       /* compatibilidade */
  --altura-demonstracao: 260px;

  /* -------------------------------------------------------- Tipografia */
  --fonte: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
           "Helvetica Neue", Roboto, Arial, sans-serif;
  --fonte-titulo: "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui,
           -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --fonte-mono: "Cascadia Mono", "JetBrains Mono", "SFMono-Regular", Consolas,
           "Liberation Mono", monospace;

  --texto-xs: 12px;
  --texto-rodape-mobile: clamp(10px, 3vw, 12px);
  --texto-2s: 13px;
  --texto-sm: 14px;
  --texto-md: 16px;
  --texto-ml: 18px;
  --texto-lg: 20px;
  --texto-xl: 24px;
  --texto-2xl: 32px;
  --texto-25: 40px;
  --texto-3xl: 48px;

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --peso-destaque: 700;

  --linha-apertada: 1.2;
  --linha-media: 1.35;
  --linha-normal: 1.55;

  /* ------------------------------------------------------------ Cores */
  --cor-fundo: #f3f6fa;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #f6f8fb;
  --cor-superficie-3: #edf2f8;
  --cor-borda: #e2e8f0;
  --cor-borda-forte: #cbd5e1;

  --cor-texto: #0f1d32;
  --cor-texto-suave: #55657a;
  --cor-texto-fraco: #7b8a9e;
  --cor-texto-invertido: #ffffff;

  --cor-primaria: #0a66c2;
  --cor-primaria-escura: #08529c;
  --cor-primaria-clara: #e9f3fd;
  --cor-primaria-media: #c6def8;
  --cor-primaria-texto: #08529c;

  --cor-sucesso: #15803d;
  --cor-sucesso-clara: #e7f6ec;
  --cor-alerta: #c9302c;
  --cor-alerta-escura: #a8231f;
  --cor-alerta-clara: #fdecec;
  --cor-aviso: #b45309;
  --cor-aviso-clara: #fef3e2;
  --cor-info: #0a66c2;
  --cor-info-clara: #e9f3fd;

  --cor-agua: #2a9fd6;
  --cor-agua-forte: #0b7bbd;
  --cor-agua-fundo: #dff0fa;
  --cor-gota-topo: #43bce6;
  --cor-gota-base: #0866a3;
  --cor-gota-texto: #ffffff;

  --cor-foco: #2b8be0;
  --cor-anel-foco: rgba(43, 139, 224, .32);

  /* Menu lateral: azul-marinho nos dois temas, identidade da marca. */
  --cor-lateral-fundo: #0b1b33;
  --cor-lateral-fundo-2: #11264a;
  --cor-lateral-borda: rgba(255, 255, 255, .08);
  --cor-lateral-texto: #e7eef8;
  --cor-lateral-suave: #94a7c2;
  --cor-lateral-ativo: rgba(77, 163, 255, .16);
  --cor-lateral-ativo-texto: #ffffff;
  --cor-lateral-destaque: #4da3ff;

  --gradiente-marca: linear-gradient(135deg, #1d8fe1 0%, #0a66c2 55%, #0b4d97 100%);
  --gradiente-heroi: radial-gradient(1200px 600px at 85% -10%, rgba(42, 159, 214, .18), transparent 60%),
                     radial-gradient(900px 500px at -10% 10%, rgba(10, 102, 194, .10), transparent 60%);

  /* Impressão: papel não tem modo escuro. */
  --cor-impressao-fundo: #ffffff;
  --cor-impressao-texto: #111111;
  --cor-impressao-suave: #777777;

  /* ---------------------------------------------------------- Sombras */
  --sombra-xs: 0 1px 2px rgba(15, 29, 50, .06);
  --sombra-card: 0 1px 2px rgba(15, 29, 50, .05), 0 4px 16px rgba(15, 29, 50, .05);
  --sombra-elevada: 0 12px 32px rgba(15, 29, 50, .14), 0 2px 8px rgba(15, 29, 50, .08);
  --sombra-botao: 0 1px 2px rgba(10, 102, 194, .25);
  --cor-ux-overlay: rgba(9, 18, 33, .55);

  /* --------------------------------------------------------- Transição */
  --transicao: 150ms cubic-bezier(.2, .7, .3, 1);
  --transicao-lenta: 260ms cubic-bezier(.2, .7, .3, 1);
}

/* Modo escuro: mesmos tokens, valores diferentes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --cor-fundo: #0a111e;
    --cor-superficie: #111a2a;
    --cor-superficie-2: #162133;
    --cor-superficie-3: #1c2940;
    --cor-borda: #223049;
    --cor-borda-forte: #33445f;

    --cor-texto: #e6edf6;
    --cor-texto-suave: #9cacc2;
    --cor-texto-fraco: #7889a1;
    --cor-texto-invertido: #06121f;

    --cor-primaria: #4da3f5;
    --cor-primaria-escura: #7cbcf8;
    --cor-primaria-clara: #10253e;
    --cor-primaria-media: #1b3a5e;
    --cor-primaria-texto: #8cc5fa;

    --cor-sucesso: #4ccb84;
    --cor-sucesso-clara: #0f2a1d;
    --cor-alerta: #f2706a;
    --cor-alerta-escura: #f69792;
    --cor-alerta-clara: #2f1517;
    --cor-aviso: #f0ac4a;
    --cor-aviso-clara: #2c2112;
    --cor-info: #4da3f5;
    --cor-info-clara: #10253e;

    --cor-agua: #3fb0e8;
    --cor-agua-forte: #6cc5f2;
    --cor-agua-fundo: #11283b;

    --cor-foco: #7cbcf8;
    --cor-anel-foco: rgba(124, 188, 248, .32);

    --cor-lateral-fundo: #070e1a;
    --cor-lateral-fundo-2: #0d1830;
    --cor-lateral-borda: rgba(255, 255, 255, .06);

    --gradiente-heroi: radial-gradient(1200px 600px at 85% -10%, rgba(63, 176, 232, .14), transparent 60%),
                       radial-gradient(900px 500px at -10% 10%, rgba(77, 163, 245, .08), transparent 60%);

    --sombra-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-card: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .25);
    --sombra-elevada: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
    --sombra-botao: none;
    --cor-ux-overlay: rgba(2, 6, 14, .7);
  }
}

:root[data-tema="escuro"] {
  color-scheme: dark;
  --cor-fundo: #0a111e;
  --cor-superficie: #111a2a;
  --cor-superficie-2: #162133;
  --cor-superficie-3: #1c2940;
  --cor-borda: #223049;
  --cor-borda-forte: #33445f;

  --cor-texto: #e6edf6;
  --cor-texto-suave: #9cacc2;
  --cor-texto-fraco: #7889a1;
  --cor-texto-invertido: #06121f;

  --cor-primaria: #4da3f5;
  --cor-primaria-escura: #7cbcf8;
  --cor-primaria-clara: #10253e;
  --cor-primaria-media: #1b3a5e;
  --cor-primaria-texto: #8cc5fa;

  --cor-sucesso: #4ccb84;
  --cor-sucesso-clara: #0f2a1d;
  --cor-alerta: #f2706a;
  --cor-alerta-escura: #f69792;
  --cor-alerta-clara: #2f1517;
  --cor-aviso: #f0ac4a;
  --cor-aviso-clara: #2c2112;
  --cor-info: #4da3f5;
  --cor-info-clara: #10253e;

  --cor-agua: #3fb0e8;
  --cor-agua-forte: #6cc5f2;
  --cor-agua-fundo: #11283b;

  --cor-foco: #7cbcf8;
  --cor-anel-foco: rgba(124, 188, 248, .32);

  --cor-lateral-fundo: #070e1a;
  --cor-lateral-fundo-2: #0d1830;
  --cor-lateral-borda: rgba(255, 255, 255, .06);

  --gradiente-heroi: radial-gradient(1200px 600px at 85% -10%, rgba(63, 176, 232, .14), transparent 60%),
                     radial-gradient(900px 500px at -10% 10%, rgba(77, 163, 245, .08), transparent 60%);

  --sombra-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-card: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .25);
  --sombra-elevada: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
  --sombra-botao: none;
  --cor-ux-overlay: rgba(2, 6, 14, .7);
}

/* No APK, a janela nativa já reserva a barra do Android. Não somar de novo. */
html[data-area-segura="nativa"] { --area-segura-inferior: 0px; }