/* McLoc — tokens de marca. Tema escuro é o padrão; tema claro via [data-theme="light"]. */
:root {
  /* Marca */
  --mcloc-gold: #E0A32E;
  --mcloc-gold-hover: #E7B75A;
  --mcloc-gold-active: #C88D1E;
  --mcloc-on-gold: #1E2022;          /* texto sobre dourado: SEMPRE escuro (branco = 2,2:1) */

  /* Tema escuro (padrão) */
  --bg: #272A2D;
  --bg-recessed: #1E2022;            /* barra lateral, campos */
  --card: #32363A;                   /* cards e janelas */
  --heading: #FFFFFF;
  --text: #D1D5DB;
  --accent-text: #E0A32E;            /* dourado usado como texto */

  /* Tipografia */
  --font-brand: "Space Grotesk", system-ui, sans-serif;   /* marca e números de destaque */
  --font-display: "DM Serif Display", Georgia, serif;     /* títulos grandes do login */
  --font-ui: "Inter", system-ui, sans-serif;              /* interface */

  --radius-tile: 22%;                /* raio do símbolo em tile */
}

[data-theme="light"] {
  --bg: #F2F3F4;
  --bg-recessed: #E6E8EA;
  --card: #FFFFFF;
  --heading: #1E2022;
  --text: #3F454B;
  --accent-text: #8A5A00;            /* dourado legível sobre claro (~5,9:1 no branco) */
}

/* Botão primário */
.btn-primary { background: var(--mcloc-gold); color: var(--mcloc-on-gold); }
.btn-primary:hover { background: var(--mcloc-gold-hover); }
.btn-primary:active { background: var(--mcloc-gold-active); }

/* Logo por tema: use as duas <img> e deixe o CSS escolher */
.logo-for-dark  { display: block; }
.logo-for-light { display: none; }
[data-theme="light"] .logo-for-dark  { display: none; }
[data-theme="light"] .logo-for-light { display: block; }

/* Fundo da tela de login (sempre escuro, 56% da largura, só ≥1024px) */
.login-art { display: none; }
@media (min-width: 1024px) {
  .login-art {
    display: block; width: 56%; height: 100vh;
    background: #1E2022 url("/brand/login/login-bg.webp") center bottom / cover no-repeat;
  }
}

/* Padrão sutil para telas vazias */
.empty-pattern { background-image: url("/brand/pattern/pattern-dark.svg"); background-size: 240px; }
[data-theme="light"] .empty-pattern { background-image: url("/brand/pattern/pattern-light.svg"); }

/* Impressão (recibos e relatórios): use a versão monocromática, até 64 px de altura */
@media print {
  .print-logo { height: 64px; width: auto; }
}