/* App da loja — padrão Nexa (preto & laranja). Um produto só para todas as lojas.
   A identidade de cada loja aparece pelo NOME (na barra lateral), após o login. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --ground: #0E0E10;
  --surface: #17171B;
  --surface-2: #1F1F26;
  --sidebar: #000000;
  --sidebar-2: #0A0A0C;
  --sidebar-ink: #ECECEE;
  --sidebar-muted: #7C7C85;
  --ink: #ECECEE;
  --muted: #9A9AA3;
  --line: #29292F;
  --line-strong: #3B3B44;
  --leather: #F97316;
  --leather-ink: #EA580C;
  --denim: #F59E42;
  --gold: #FB8C2E;
  --gold-ink: #F97316;
  --gold-bg: #2A1705;
  --ok: #3FB950;   --ok-bg: #10231A;
  --warn: #E3B341; --warn-bg: #2A2410;
  --danger: #F85149; --danger-bg: #2A1517;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.55);
}

/* Texto do botão primário: escuro no laranja Nexa; a marca da loja define
   --on-leather por luminância (branco em cor escura, escuro em cor clara). */
.btn-primary { color: var(--on-leather, #1a0f04); }
.btn-primary:hover { color: var(--on-leather, #1a0f04); }
.btn-gold { color: var(--on-gold, #1a0f04); }

/* Login: glow laranja no fundo preto */
.auth-screen {
  background: radial-gradient(1100px 560px at 25% -10%, rgba(249,115,22,.18), #0E0E10) !important;
}

/* Logo completa Nexa Control (símbolo + wordmark) */
.nexa-lockup { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nexa-lockup .sym { width: 96px; height: 96px; display: block; object-fit: contain; }
.nexa-word { text-align: center; font-family: var(--font); line-height: 1; }
.nexa-word .n { display: block; color: #fff; font-weight: 800; font-size: 30px; letter-spacing: .16em; }
.nexa-word .c { display: block; color: var(--gold); font-weight: 700; font-size: 13px; letter-spacing: .44em; margin-top: 4px; padding-left: .44em; }

/* Símbolo Nexa na barra lateral */
.brand-chip.nexa { background: transparent; box-shadow: none; }
.brand-chip.nexa img { width: 100%; height: 100%; object-fit: contain; }