/*
 * CARNEIRO NEXUS · identidade 1.0.0
 * Sem dependências externas. Não altera body, botões ou navegação do sistema.
 * Tema: data-theme="light|dark|auto" no <html> ou em um contêiner.
 * Sem data-theme no <html>, acompanha a preferência do dispositivo.
 * Os arquivos SVG já contêm a tipografia em curvas.
 */

:root {
  /* Cores fixas da identidade */
  --cn-red: #E21B23;
  --cn-red-hover: #C5161E;
  --cn-red-on-dark: #FF646B;
  --cn-black: #151719;
  --cn-graphite: #1F2329;
  --cn-white: #FFFFFF;
  --cn-off-white: #F5F6F8;
  --cn-slate: #667085;
  --cn-line: #D8DDE5;

  /* Estados financeiros em superfícies claras; independentes da marca. */
  --cn-success: #087F5B;
  --cn-warning: #925A00;
  --cn-info: #175CD3;
  --cn-error: #B42318;
}

:root,
[data-theme="light"],
[data-theme="auto"] {
  --cn-background: #F5F6F8;
  --cn-surface: #FFFFFF;
  --cn-surface-subtle: #F5F6F8;
  --cn-text: #151719;
  --cn-text-muted: #667085;
  --cn-border: #D8DDE5;
  --cn-accent: #E21B23;
  --cn-accent-hover: #C5161E;
  /* Texto de destaque legível sobre branco e #F5F6F8. */
  --cn-accent-text: #C5161E;
  --cn-state-success-text: #087F5B;
  --cn-state-warning-text: #925A00;
  --cn-state-info-text: #175CD3;
  --cn-state-error-text: #B42318;
  --cn-logo-light-display: block;
  --cn-logo-dark-display: none;
  --cn-color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]),
  [data-theme="auto"] {
    --cn-background: #151719;
    --cn-surface: #1F2329;
    --cn-surface-subtle: #252B33;
    --cn-text: #FFFFFF;
    --cn-text-muted: #B8C0CC;
    --cn-border: #3B424D;
    --cn-accent: #E21B23;
    --cn-accent-hover: #C5161E;
    --cn-accent-text: #FF646B;
    --cn-state-success-text: #34D399;
    --cn-state-warning-text: #F2B84B;
    --cn-state-info-text: #7CB4FF;
    --cn-state-error-text: #FF8075;
    --cn-logo-light-display: none;
    --cn-logo-dark-display: block;
    --cn-color-scheme: dark;
  }
}

[data-theme="dark"] {
  --cn-background: #151719;
  --cn-surface: #1F2329;
  --cn-surface-subtle: #252B33;
  --cn-text: #FFFFFF;
  --cn-text-muted: #B8C0CC;
  --cn-border: #3B424D;
  --cn-accent: #E21B23;
  --cn-accent-hover: #C5161E;
  --cn-accent-text: #FF646B;
  --cn-state-success-text: #34D399;
  --cn-state-warning-text: #F2B84B;
  --cn-state-info-text: #7CB4FF;
  --cn-state-error-text: #FF8075;
  --cn-logo-light-display: none;
  --cn-logo-dark-display: block;
  --cn-color-scheme: dark;
}

/* Imagens alternativas compartilham o nome acessível do contêiner. */
.cn-brand__light,
.cn-logo--light {
  display: var(--cn-logo-light-display, block);
}

.cn-brand__dark,
.cn-logo--dark {
  display: var(--cn-logo-dark-display, none);
}

/*
 * Logo responsivo
 * Ajuste --cn-brand-width no contêiner; pode ser 100% em uma coluna flex/grid.
 * >= 220 px: horizontal | 120–219 px: compacto | 33–119 px: símbolo
 * <= 32 px: símbolo micro. A área disponível, e não a tela, define a versão.
 */
.cn-brand {
  display: inline-block;
  inline-size: var(--cn-brand-width, 280px);
  max-inline-size: 100%;
  min-inline-size: 0;
  vertical-align: middle;
  line-height: 0;
  container-name: cn-logo;
  container-type: inline-size;
}

.cn-brand__variant {
  display: none;
  inline-size: 100%;
  min-inline-size: 0;
}

.cn-brand__variant--horizontal {
  display: block;
}

.cn-brand__variant img {
  inline-size: 100%;
  block-size: auto;
  max-block-size: var(--cn-brand-max-height, 64px);
  object-fit: contain;
  object-position: var(--cn-brand-position, left center);
  border: 0;
}

.cn-brand__variant--simbolo,
.cn-brand__variant--micro {
  inline-size: min(100%, var(--cn-brand-symbol-size, 48px));
}

@container cn-logo (width < 220px) {
  .cn-brand__variant--horizontal { display: none; }
  .cn-brand__variant--compacto { display: block; }
}

@container cn-logo (width < 120px) {
  .cn-brand__variant--compacto { display: none; }
  .cn-brand__variant--simbolo { display: block; }
}

@container cn-logo (width <= 32px) {
  .cn-brand__variant--simbolo { display: none; }
  .cn-brand__variant--micro { display: block; }
}

/* Navegadores sem container queries: aproximação pelo tamanho da tela. */
@supports not (container-type: inline-size) {
  @media (max-width: 639px) {
    .cn-brand__variant--horizontal { display: none; }
    .cn-brand__variant--compacto { display: block; }
  }
  @media (max-width: 379px) {
    .cn-brand__variant--compacto { display: none; }
    .cn-brand__variant--simbolo { display: block; }
  }
}

/*
 * Forçar um formato é útil em cabeçalhos de impressão ou navegadores antigos.
 * Valores: horizontal, compacto, simbolo, micro. Remova o atributo para auto.
 */
.cn-brand[data-logo-layout] .cn-brand__variant { display: none; }
.cn-brand[data-logo-layout="horizontal"] .cn-brand__variant--horizontal,
.cn-brand[data-logo-layout="compacto"] .cn-brand__variant--compacto,
.cn-brand[data-logo-layout="simbolo"] .cn-brand__variant--simbolo,
.cn-brand[data-logo-layout="micro"] .cn-brand__variant--micro { display: block; }