/* =========================================================================
   Mandatus Data — paleta (tema claro + escuro)

   A escala neutra é derivada da cor primária #0B111E (HSL 221°, 46%, 8%):
   mesma matiz, variando saturação e luminosidade. O azul de destaque é a
   mesma matiz 221° levada a alta saturação.

   ESTRUTURA
   ---------
   1. :root                       — tokens invariantes (forma, tipografia,
                                    escala de marca, escala de destaque)
   2. :root, [data-theme=dark]    — aliases semânticos do tema ESCURO (padrão)
   3. [data-theme=light]          — aliases semânticos do tema CLARO

   A regra de ouro: NADA no app deve usar --brand-* ou --accent-NNN direto
   quando existir um alias semântico (--ink, --panel, --text, --accent-soft…).
   São os aliases que trocam entre os temas.
   ========================================================================= */

:root {
  /* --- escala da marca (matiz 221°) — invariante nos dois temas --- */
  --brand-980: #060a11; /* fundo mais profundo, sombras */
  --brand-950: #0b111e; /* PRIMÁRIA — menu lateral, chrome */
  --brand-900: #0f1627; /* cartões sobre a primária */
  --brand-850: #151d30; /* hover de cartão */
  --brand-800: #1b2439; /* superfície elevada */
  --brand-700: #28334b; /* bordas */
  --brand-600: #3c4a67; /* bordas em destaque */
  --brand-500: #586789; /* texto desabilitado */
  --brand-400: #808daa; /* texto secundário */
  --brand-300: #a8b2c7; /* texto terciário claro */
  --brand-200: #cfd6e5; /* texto sobre fundo escuro */
  --brand-100: #e9edf7; /* texto principal (escuro) */
  --brand-050: #f5f7fb; /* fundo do tema claro */
  --brand-000: #ffffff;

  /* --- destaque (mesma matiz, saturada) --- */
  --accent-800: #12326f;
  --accent-700: #1b47a7;
  --accent-600: #1856dc;
  --accent-500: #3671f2; /* ação primária */
  --accent-400: #6292f8; /* números, links, foco (sobre fundo escuro) */
  --accent-300: #92b3fc;

  /* --- semânticos de status --- */
  --ok: #16a874;
  --warn: #e0a63a;
  --danger: #d9483b;

  /* --- forma e tipografia (invariante) --- */
  --radius: 14px;
  --radius-sm: 10px;
  --side-w: 372px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Archivo", var(--sans);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: dark;
}

/* =========================================================================
   TEMA ESCURO — padrão do produto
   ========================================================================= */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* superfícies */
  --ink: var(--brand-950); /* fundo da página */
  --surface-nav: var(--brand-950); /* menu lateral, toolbar, toast */
  --surface-float: var(--brand-950); /* popups do mapa */
  --panel: var(--brand-900); /* cartões */
  --panel-2: var(--brand-850); /* hover de cartão */
  --panel-3: var(--brand-800); /* superfície elevada */
  --map-bg: #e9edf2; /* enquanto os tiles carregam */

  /* traços */
  --line: var(--brand-700);
  --line-2: var(--brand-600);

  /* texto */
  --text: var(--brand-100);
  --muted: var(--brand-400);
  --muted-2: var(--brand-500); /* rodapés, dicas */
  --on-accent: #ffffff;

  /* destaque em uso */
  --accent: var(--accent-500);
  --accent-soft: var(--accent-400); /* números e links sobre fundo escuro */
  --accent-ghost: rgba(54, 113, 242, 0.14);
  --accent-ring: rgba(54, 113, 242, 0.14);

  /* perigo em uso (hover do botão Sair, mensagens de erro) */
  --danger-text: #ffb4ab;
  --danger-line: rgba(217, 72, 59, 0.5);
  --danger-ghost: rgba(217, 72, 59, 0.1);

  /* --- escala de quartis (semântica de dados) --- */
  --q1: #1b2439; /* menor  — navy da marca, some no fundo escuro */
  --q2: #d9483b; /* baixo  — vermelho */
  --q3: #3671f2; /* alto   — azul da marca */
  --q4: #16a874; /* maior  — verde */
  --q-na: #586789;
  --q1-ink: #cfd6e5; /* texto legível SOBRE o swatch Q1 */

  /* traço dos vetores no mapa */
  --stroke-poly: #0b111e;
  --stroke-dot: #ffffff;

  --shadow: 0 18px 44px rgba(6, 10, 17, 0.55);
  --shadow-sm: 0 6px 16px rgba(6, 10, 17, 0.4);
}

/* =========================================================================
   TEMA CLARO
   Mesma matiz 221°, invertendo a rampa. O azul de destaque desce para o
   accent-600 nos textos: o accent-400 sobre branco fica em ~2.9:1 de
   contraste, abaixo do mínimo legível.
   ========================================================================= */
:root[data-theme="light"] {
  color-scheme: light;

  /* superfícies */
  --ink: #eef2f8;
  --surface-nav: #ffffff;
  --surface-float: #ffffff;
  --panel: #f5f7fb;
  --panel-2: #e7edf7;
  --panel-3: #dde5f2;
  --map-bg: #eef2f8;

  /* traços */
  --line: #dbe2ef;
  --line-2: #bfcbe1;

  /* texto */
  --text: #0b111e;
  --muted: #5a6889;
  --muted-2: #74809d;
  --on-accent: #ffffff;

  /* destaque em uso */
  --accent: var(--accent-600);
  --accent-soft: var(--accent-600); /* contraste ≥ 4.5:1 sobre branco */
  --accent-ghost: rgba(24, 86, 220, 0.09);
  --accent-ring: rgba(24, 86, 220, 0.18);

  /* perigo em uso */
  --danger-text: #a52a1e;
  --danger-line: rgba(165, 42, 30, 0.45);
  --danger-ghost: rgba(217, 72, 59, 0.09);

  /* --- escala de quartis --- */
  --q1: #97a2ba; /* menor — cinza-azulado: some no fundo CLARO */
  --q2: #c93d31; /* baixo */
  --q3: #2a63e0; /* alto */
  --q4: #0f8c5f; /* maior */
  --q-na: #b5bdcd;
  --q1-ink: #10192b;

  /* traço dos vetores no mapa */
  --stroke-poly: #5a657d;
  --stroke-dot: #0f1627;

  --shadow: 0 14px 34px rgba(11, 17, 30, 0.14);
  --shadow-sm: 0 5px 14px rgba(11, 17, 30, 0.1);
}