/* ── Tema do Portal — aliases semânticos sobre tokens.css ──────────────────
   Carregado DEPOIS de tokens.css e ANTES de main.css (ver base.html).
   Regra: nenhuma cor fixa aqui nem em main.css. Toda cor vem de um token
   (--color-*) ou de color-mix() entre tokens. Ver docs/conventions/design-system.md.

   Três camadas:
   1. Aliases do Peers Deck (idênticos a peers-deck/public/styles.css).
   2. Aliases próprios do Portal (superfícies, primário, status, navegação).
   3. Nomes legados (--navy, --border, --sky-mid…) apontando para a camada 2,
      porque templates e JS ainda usam esses nomes em style inline. */

/* 1. Aliases do Peers Deck ─────────────────────────────────────────────── */
:root {
  --blue: var(--color-brand-blue);
  --lime: var(--color-brand-lime);
  --serene: var(--color-brand-serene);
  --white: var(--color-brand-white);
  --grey1: var(--color-brand-scale-blue-02);
  --grey3: var(--color-brand-scale-blue-04);
  --ser2: var(--color-brand-scale-serene-02);
  --ser3: var(--color-brand-scale-serene-03);
  --fh: var(--typography-font-family-secondary);
  --fn: var(--typography-font-family-primary);
  --ok: var(--color-semantic-success-main);
  --warn: var(--color-semantic-warning-main);
  --err: var(--color-semantic-error-main);
  --bg: var(--color-brand-white);
  --bg2: var(--color-brand-scale-serene-03);
  --ink: var(--color-brand-blue);
  --muted: var(--color-brand-scale-blue-02);
  --line: var(--color-brand-scale-blue-04);
  --radius: var(--border-radius-md);
  --radius-lg: var(--border-radius-lg);
}
/* Tema escuro: preferência do sistema OU escolha explícita (data-theme no <html>,
   gravada no localStorage). O :not([data-theme="light"]) deixa escolher claro numa
   máquina em escuro — sem ele, o sistema venceria sempre. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--color-neutral-900);
    --bg2: var(--color-neutral-800);
    --ink: var(--color-brand-white);
    --muted: var(--color-neutral-500);
    --line: var(--color-neutral-700);
  }
}
:root[data-theme="dark"] {
  --bg: var(--color-neutral-900);
  --bg2: var(--color-neutral-800);
  --ink: var(--color-brand-white);
  --muted: var(--color-neutral-500);
  --line: var(--color-neutral-700);
}

/* 2. Aliases do Portal — claro ─────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Superfícies. O Portal tem fundo de página levemente azulado e cards brancos. */
  --page: var(--color-brand-scale-serene-03);
  --surface: var(--color-brand-white);
  --surface-2: var(--color-brand-scale-serene-02);
  --surface-3: var(--color-brand-scale-serene-03);
  --hover: color-mix(in srgb, var(--color-brand-blue) 4%, transparent);
  --scrim: color-mix(in srgb, var(--color-brand-blue) 55%, transparent);

  /* Texto. --muted escurece um pouco o blue-02 do Deck: sobre serene-02 o
     blue-02 puro dá 4,3:1 e reprova AA. Com 15% de azul passa de 5:1. */
  --ink-2: var(--color-neutral-700);
  --muted: color-mix(in srgb, var(--color-brand-scale-blue-02) 85%, var(--color-brand-blue));
  --line-strong: var(--color-brand-scale-blue-03);

  /* Ações. Primário azul, destaque lime (60/30/10 da marca). */
  --primary: var(--color-brand-blue);
  --on-primary: var(--color-brand-white);
  --primary-hover: var(--color-brand-lime);
  --on-primary-hover: var(--color-brand-blue);
  --accent: var(--color-brand-lime);
  --on-accent: var(--color-brand-blue);
  --accent-soft: var(--color-brand-scale-lime-02);
  --accent-softer: var(--color-brand-scale-lime-03);
  --accent-line: color-mix(in srgb, var(--color-brand-lime) 55%, var(--color-neutral-600));
  --focus-ring: color-mix(in srgb, var(--color-brand-blue) 35%, transparent);

  /* Navegação lateral */
  --nav-ink: var(--color-neutral-700);
  --nav-icon: var(--color-brand-scale-blue-02);
  --nav-active-bg: var(--color-brand-scale-serene-02);
  --nav-active-bar: var(--color-brand-blue);

  /* Faixa de marca (cabeçalho de dashboard, toast): sempre azul da marca. */
  --brand-band: var(--color-brand-blue);
  --on-brand-band: var(--color-brand-white);
  --on-brand-band-muted: color-mix(in srgb, var(--color-brand-white) 72%, transparent);

  /* Status — fundo suave + texto escuro (badges, avisos) */
  --success-bg: var(--color-semantic-success-lighter);
  --success-text: var(--color-semantic-success-darker);
  --warning-bg: var(--color-semantic-warning-lighter);
  --warning-text: var(--color-semantic-warning-darker);
  --danger-bg: var(--color-semantic-error-lighter);
  --danger-text: var(--color-semantic-error-dark);
  --info-bg: var(--color-semantic-info-lighter);
  --info-text: var(--color-semantic-info-darker);
  --neutral-bg: var(--color-neutral-200);
  --neutral-text: var(--color-neutral-700);

  /* Status — cor cheia (pontos, barras, faixas, células de heatmap) */
  --red: var(--color-semantic-error-main);
  --red-strong: var(--color-semantic-error-dark);
  --yellow: var(--color-semantic-warning-main);
  --green: var(--color-semantic-success-main);
  --on-status: var(--color-brand-blue);          /* texto sobre --red/--yellow/--green */
  --on-status-strong: var(--color-brand-white);  /* texto sobre --red-strong */

  /* Escala de espaço do Portal (meio passo do DS: 4px). */
  --space-1: calc(var(--spacing-base) / 2);
  --space-2: var(--spacing-1);
  --space-3: calc(var(--spacing-base) * 1.5);
  --space-4: var(--spacing-2);
  --space-5: var(--spacing-3);
  --space-6: var(--spacing-4);

  --radius-sm: var(--border-radius-sm);
  --radius-md: var(--border-radius-md);
  /* --radius-lg já é alias do Deck (12px) */
  --radius-xl: var(--border-radius-xl);
  --radius-pill: var(--border-radius-full);

  /* Tipografia — tamanhos de interface (densos de propósito, é ferramenta interna) */
  --font-xs: var(--typography-font-size-xs);
  --font-sm: calc(var(--typography-font-size-xs) + 1px);
  --font-base: calc(var(--typography-font-size-sm) - 1px);
  --font-md: var(--typography-font-size-sm);
  --font-lg: var(--typography-font-size-md);
  --font-xl: var(--typography-font-size-lg);
  --font-xxl: var(--typography-font-size-xl);
  --fm: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fundo de gráfico: transparente no claro, "papel" claro no escuro (ver main.css). */
  --chart-paper: transparent;

  --sidebar-w: 248px;
  --topbar-h: 60px;
}

/* 2b. Aliases do Portal — escuro ─────────────────────────────────────────
   Mesmo bloco nos dois seletores (sistema e escolha explícita), como no Deck. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: var(--color-neutral-900);
    --surface: var(--color-neutral-800);
    --surface-2: color-mix(in srgb, var(--color-neutral-700) 45%, var(--color-neutral-800));
    --surface-3: color-mix(in srgb, var(--color-neutral-700) 25%, var(--color-neutral-800));
    --hover: color-mix(in srgb, var(--color-brand-white) 5%, transparent);
    --scrim: color-mix(in srgb, var(--color-neutral-900) 75%, transparent);
    --ink-2: var(--color-neutral-300);
    --muted: color-mix(in srgb, var(--color-neutral-400) 50%, var(--color-neutral-500));
    --line-strong: var(--color-neutral-600);
    --primary: var(--color-brand-serene);
    --on-primary: var(--color-brand-blue);
    --accent-soft: color-mix(in srgb, var(--color-brand-lime) 16%, var(--color-neutral-800));
    --accent-softer: color-mix(in srgb, var(--color-brand-lime) 8%, var(--color-neutral-800));
    --accent-line: color-mix(in srgb, var(--color-brand-lime) 45%, var(--color-neutral-700));
    --focus-ring: color-mix(in srgb, var(--color-brand-lime) 45%, transparent);
    --nav-ink: var(--color-neutral-300);
    --nav-icon: var(--color-neutral-500);
    --nav-active-bg: color-mix(in srgb, var(--color-brand-lime) 9%, var(--color-neutral-800));
    --nav-active-bar: var(--color-brand-lime);
    --brand-band: color-mix(in srgb, var(--color-brand-blue) 70%, var(--color-neutral-800));
    --chart-paper: var(--color-neutral-100);
    --success-bg: color-mix(in srgb, var(--color-semantic-success-main) 18%, var(--color-neutral-800));
    --success-text: var(--color-semantic-success-light);
    --warning-bg: color-mix(in srgb, var(--color-semantic-warning-main) 18%, var(--color-neutral-800));
    --warning-text: var(--color-semantic-warning-light);
    --danger-bg: color-mix(in srgb, var(--color-semantic-error-main) 18%, var(--color-neutral-800));
    --danger-text: var(--color-semantic-error-light);
    --info-bg: color-mix(in srgb, var(--color-semantic-info-main) 18%, var(--color-neutral-800));
    --info-text: var(--color-semantic-info-light);
    --neutral-bg: var(--color-neutral-700);
    --neutral-text: var(--color-neutral-200);
    --shadow-sm: 0 1px 2px 0 color-mix(in srgb, var(--color-neutral-900) 60%, transparent);
    --shadow-md: 0 4px 10px 0 color-mix(in srgb, var(--color-neutral-900) 70%, transparent);
    --shadow-lg: 0 8px 24px 0 color-mix(in srgb, var(--color-neutral-900) 80%, transparent);
    --shadow-xl: 0 16px 40px 0 color-mix(in srgb, var(--color-neutral-900) 85%, transparent);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: var(--color-neutral-900);
  --surface: var(--color-neutral-800);
  --surface-2: color-mix(in srgb, var(--color-neutral-700) 45%, var(--color-neutral-800));
  --surface-3: color-mix(in srgb, var(--color-neutral-700) 25%, var(--color-neutral-800));
  --hover: color-mix(in srgb, var(--color-brand-white) 5%, transparent);
  --scrim: color-mix(in srgb, var(--color-neutral-900) 75%, transparent);
  --ink-2: var(--color-neutral-300);
  --muted: color-mix(in srgb, var(--color-neutral-400) 50%, var(--color-neutral-500));
  --line-strong: var(--color-neutral-600);
  --primary: var(--color-brand-serene);
  --on-primary: var(--color-brand-blue);
  --accent-soft: color-mix(in srgb, var(--color-brand-lime) 16%, var(--color-neutral-800));
  --accent-softer: color-mix(in srgb, var(--color-brand-lime) 8%, var(--color-neutral-800));
  --accent-line: color-mix(in srgb, var(--color-brand-lime) 45%, var(--color-neutral-700));
  --focus-ring: color-mix(in srgb, var(--color-brand-lime) 45%, transparent);
  --nav-ink: var(--color-neutral-300);
  --nav-icon: var(--color-neutral-500);
  --nav-active-bg: color-mix(in srgb, var(--color-brand-lime) 9%, var(--color-neutral-800));
  --nav-active-bar: var(--color-brand-lime);
  --brand-band: color-mix(in srgb, var(--color-brand-blue) 70%, var(--color-neutral-800));
  --chart-paper: var(--color-neutral-100);
  --success-bg: color-mix(in srgb, var(--color-semantic-success-main) 18%, var(--color-neutral-800));
  --success-text: var(--color-semantic-success-light);
  --warning-bg: color-mix(in srgb, var(--color-semantic-warning-main) 18%, var(--color-neutral-800));
  --warning-text: var(--color-semantic-warning-light);
  --danger-bg: color-mix(in srgb, var(--color-semantic-error-main) 18%, var(--color-neutral-800));
  --danger-text: var(--color-semantic-error-light);
  --info-bg: color-mix(in srgb, var(--color-semantic-info-main) 18%, var(--color-neutral-800));
  --info-text: var(--color-semantic-info-light);
  --neutral-bg: var(--color-neutral-700);
  --neutral-text: var(--color-neutral-200);
  --shadow-sm: 0 1px 2px 0 color-mix(in srgb, var(--color-neutral-900) 60%, transparent);
  --shadow-md: 0 4px 10px 0 color-mix(in srgb, var(--color-neutral-900) 70%, transparent);
  --shadow-lg: 0 8px 24px 0 color-mix(in srgb, var(--color-neutral-900) 80%, transparent);
  --shadow-xl: 0 16px 40px 0 color-mix(in srgb, var(--color-neutral-900) 85%, transparent);
}

/* 3. Nomes legados ─────────────────────────────────────────────────────────
   Usados em style inline de templates e em JS. Não use em código novo. */
:root {
  --navy: var(--ink);
  --slate: var(--muted);
  --border: var(--line);
  --sky: var(--serene);
  --sky-mid: var(--surface-2);
  --sky-pale: var(--surface-3);
  --subheader: var(--ink-2);
  --lime-pale: var(--accent-soft);
  --lime-xpale: var(--accent-softer);
}

/* Logos: a marca escolhe o arquivo, o tema escolhe a versão (azul no claro,
   lime no escuro). Só CSS — nenhuma troca de src em JS. */
.logo-dark, .logo-actar { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: inline-block; }
}
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: inline-block; }
:root[data-brand="actar"] .logo-light,
:root[data-brand="actar"] .logo-dark,
:root[data-brand="actar"] .logo-peers { display: none; }
:root[data-brand="actar"] .logo-actar { display: inline-block; }