/* ==========================================================================
   TechnicalViewer — Design Tokens
   Paleta: azul claro (ação/marca) + verde claro (positivo/online) + branco
   ========================================================================== */

:root {
  /* Superfícies */
  --bg: #F4F8FC;
  --surface: #FFFFFF;
  --surface-alt: #EAF3FB;
  --surface-sunken: #EEF2F6;

  /* Marca — azul claro */
  --primary: #3E8EDE;
  --primary-hover: #2E71B8;
  --primary-tint: #DCEBFB;
  --primary-tint-strong: #C3DEF8;

  /* Positivo — verde claro */
  --success: #4CB783;
  --success-hover: #3A9A6C;
  --success-tint: #E2F5EB;

  /* Estados complementares (necessários para status de ativos/demandas) */
  --warning: #E8A33D;
  --warning-tint: #FBEDD9;
  --danger: #DD5353;
  --danger-tint: #FBE4E4;
  --info: #7C8FE0;

  /* Texto */
  --text: #1E2A38;
  --text-muted: #64748B;
  --text-soft: #94A3B8;
  --text-on-primary: #FFFFFF;

  /* Bordas e sombras */
  --border: #DCE6F0;
  --border-soft: #E9F0F7;
  --shadow-sm: 0 2px 8px rgba(30, 42, 56, 0.035);
  --shadow-md: 0 6px 24px rgba(30, 42, 56, 0.06);
  --shadow-lg: 0 18px 48px rgba(30, 42, 56, 0.10);

  /* Tipografia */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2rem;

  /* Layout */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 68px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;

  /* Espaçamento (escala 4px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  --transition: 160ms ease;
}

:root[data-theme="dark"] {
  --bg: #101827;
  --surface: #182235;
  --surface-alt: #223149;
  --surface-sunken: #101827;
  --text: #E8EEF7;
  --text-muted: #A9B8CC;
  --text-soft: #7F91AA;
  --border: #30435F;
  --border-soft: #263952;
  --primary: #63A8F2;
  --primary-hover: #8BC2FA;
  --primary-tint: #1D3C62;
  --primary-tint-strong: #28517D;
  --success-tint: #193E35;
  --warning-tint: #4A351D;
  --danger-tint: #48252B;
  --text-on-primary: #101827;
  --success-hover: #7ED5A6;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.28);
}