/* Tema CadPol Simula.
   Sobrepõe as variáveis da interface compilada (interface.css) sem recompilar o bundle. Carregar DEPOIS de
   interface.css, improvements.css e php-forms.css. Cores, raios e fontes vêm do kit de marca do CadPol (tokens.css).
   As variáveis de cor são trincas HSL sem "hsl()", porque a interface as usa como hsl(var(--primary)) e
   hsl(var(--primary) / .1): não trocar o formato. */

:root {
  /* Marca (referência; iguais ao tokens.css do kit) */
  --cp-marinho: #16205c;
  --cp-marinho-escuro: #0e1542;
  --cp-marinho-claro: #eef0fa;
  --cp-vermelho: #e3262f;
  --cp-vermelho-escuro: #c21d25;
  --cp-azul: #2f6fed;
  --cp-azul-claro: #6ea0ff;
  --cp-raio: 14px;
  --cp-raio-controle: 10px;
  --cp-fonte: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --cp-titulo: "Barlow", "Inter", "Segoe UI", sans-serif;

  /* Variáveis da interface — modo claro */
  --background: 230 43% 97%;            /* #f5f6fb */
  --foreground: 233 38% 18%;            /* #1d2140 */
  --card: 0 0% 100%;
  --card-foreground: 233 38% 18%;
  --popover: 0 0% 100%;
  --popover-foreground: 233 38% 18%;
  --primary: 231 61% 22%;               /* marinho #16205c */
  --primary-foreground: 0 0% 100%;
  --secondary: 230 55% 96%;             /* marinho claro #eef0fa */
  --secondary-foreground: 231 61% 22%;
  --muted: 226 42% 94%;                 /* #e9ecf6 */
  --muted-foreground: 226 16% 41%;      /* #58607a */
  --accent: 230 55% 96%;
  --accent-foreground: 231 61% 22%;
  --destructive: 357 74% 44%;           /* vermelho escuro #c21d25 (contraste 6:1 no branco) */
  --destructive-foreground: 0 0% 100%;
  --border: 225 30% 92%;                /* #e5e8f1 */
  --input: 225 30% 92%;
  --ring: 220 84% 56%;                  /* azul #2f6fed */
  --radius: 0.875rem;
  --primary-gradient: linear-gradient(180deg, #243596, #16205c);
  --orange: 357 77% 52%;                /* o laranja do legado saiu: o destaque é o vermelho da marca */
  --orange-gradient: linear-gradient(135deg, #e3262f, #c21d25);
  --green: 146 67% 37%;                 /* #1f9d55 */
  --shadow-card: 0 1px 3px rgba(22, 32, 92, .06), 0 4px 14px rgba(22, 32, 92, .05);
  --shadow-primary: 0 4px 12px rgba(22, 32, 92, .18);
  --shadow-soft: 0 2px 10px rgba(22, 32, 92, .06);
  --shadow-fab: 0 8px 20px rgba(22, 32, 92, .28);
  --shadow-bottom: 0 -1px 8px rgba(22, 32, 92, .06);
  --shadow-field: 0 2px 8px rgba(22, 32, 92, .04);
}

/* Modo escuro: o marinho não contrasta com o fundo, então o primário vira o azul claro da marca
   (texto escuro por cima: 7,4:1) sobre um marinho bem escuro. */
.dark {
  --background: 233 65% 10%;            /* #090d2b */
  --foreground: 226 62% 96%;            /* #eef1fb (15:1 no cartão) */
  --card: 232 65% 16%;                  /* marinho escuro #0e1542 */
  --card-foreground: 226 62% 96%;
  --popover: 232 65% 16%;
  --popover-foreground: 226 62% 96%;
  --primary: 219 100% 72%;              /* azul claro #6ea0ff */
  --primary-foreground: 233 65% 10%;
  --secondary: 231 57% 24%;             /* #1a2560 */
  --secondary-foreground: 226 62% 96%;
  --muted: 231 57% 24%;
  --muted-foreground: 228 35% 75%;      /* #aab3d6 (8:1 no cartão) */
  --accent: 231 57% 24%;
  --accent-foreground: 226 62% 96%;
  --destructive: 357 83% 66%;           /* #f0626a (5,5:1 no cartão escuro) */
  --destructive-foreground: 233 65% 10%;
  --border: 231 53% 31%;                /* #26327a */
  --input: 231 53% 31%;
  --ring: 219 100% 72%;
  --primary-gradient: linear-gradient(180deg, #5b90f7, #3a78ee);
  --orange-gradient: linear-gradient(135deg, #ff7b82, #f0626a);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .25);
  --shadow-primary: 0 4px 12px rgba(0, 0, 0, .4);
  --shadow-soft: 0 2px 10px rgba(0, 0, 0, .3);
  --shadow-fab: 0 8px 20px rgba(0, 0, 0, .5);
  --shadow-bottom: 0 -1px 8px rgba(0, 0, 0, .35);
  --shadow-field: 0 2px 8px rgba(0, 0, 0, .25);
}

/* Fontes: Inter no texto, Barlow nos títulos e nos rótulos pesados que funcionam como título. */
html, :host, body, .account-page { font-family: var(--cp-fonte); }
h1, h2, h3, .font-black { font-family: var(--cp-titulo); }

/* Raios da marca: 14 px em cartões e painéis, 10 px em botões e campos. */
.rounded-2xl, .rounded-3xl, .rounded-\[26px\] { border-radius: var(--cp-raio); }
button.rounded-2xl, a.rounded-2xl, input.rounded-2xl, select.rounded-2xl, textarea.rounded-2xl,
button.rounded-xl, a.rounded-xl, input.rounded-xl, select.rounded-xl, textarea.rounded-xl,
button.rounded-\[12px\], a.rounded-\[12px\] { border-radius: var(--cp-raio-controle); }

/* Logos: a interface traz duas imagens (para fundo claro e para fundo escuro) e o tema mostra a que serve. */
.logo-fundo-escuro { display: none; }
.dark .logo-fundo-claro { display: none; }
.dark .logo-fundo-escuro { display: block; }
/* O ícone "CP" é marinho; no fundo escuro ganha um contorno para não sumir. */
.dark .logo-icone { box-shadow: 0 0 0 1px hsl(var(--border)); }