/* ============================================================================
 * BOX FIBRA — Design Tokens
 * Tokens são carregados do /api/branding via JS (applyBrandingTokens em
 * noc-shared.js). Aqui ficam os defaults caso o branding não esteja disponível.
 * ============================================================================ */

:root {
  /* ─── Paleta primária (branding) ───────────────────────────────────────────
   * --brand-primary, --brand-secondary, --brand-accent, --brand-dark vêm de
   * /branding.css (compartilhado com PWA). NÃO declarar aqui — duplica.
   * ────────────────────────────────────────────────────────────────────── */

  /* Derivados para uso em UI (tonal scale) — mantidos aqui porque dependem
     do valor hex literal do BOX FIBRA pra ficarem com alpha. Não dão pra
     calcular via var() em rgba(). Se mudar a marca, recalcule. */
  --brand-primary-50:   rgba(110, 19, 109, 0.05);
  --brand-primary-100:  rgba(110, 19, 109, 0.12);
  --brand-primary-300:  rgba(110, 19, 109, 0.40);
  --brand-primary-600:  #6E136D;
  --brand-primary-900:  #4A0E49;

  /* ─── Semáforo de estado da rede ─── */
  --status-green:        #16a34a;
  --status-green-bg:     rgba(22, 163, 74, 0.12);
  --status-green-border: rgba(22, 163, 74, 0.40);

  --status-yellow:        #d97706;
  --status-yellow-bg:     rgba(217, 119, 6, 0.12);
  --status-yellow-border: rgba(217, 119, 6, 0.40);

  --status-red:        #dc2626;
  --status-red-bg:     rgba(220, 38, 38, 0.12);
  --status-red-border: rgba(220, 38, 38, 0.40);

  /* ─── Severidade de eventos/alarms ─── */
  --sev-critical:    #dc2626;
  --sev-critical-bg: rgba(220, 38, 38, 0.15);
  --sev-major:       #ea580c;
  --sev-major-bg:    rgba(234, 88, 12, 0.15);
  --sev-minor:       #2563eb;
  --sev-minor-bg:    rgba(37, 99, 235, 0.15);
  --sev-info:        #6b7280;
  --sev-info-bg:     rgba(107, 114, 128, 0.12);

  /* ─── Cores de UI (dark theme) ─── */
  --bg-page:        #0d1117;
  --bg-panel:       #161b22;
  --bg-panel-2:     #1c2128;
  --bg-elevated:    #21262d;
  --bg-hover:       #2d333b;

  --border-soft:    #21262d;
  --border:         #30363d;
  --border-strong:  #484f58;

  --text:           #c9d1d9;
  --text-strong:    #f0f6fc;
  --text-muted:     #8b949e;
  --text-dim:       #6e7681;

  /* ─── Tipografia ─── */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Consolas", "Monaco", "SF Mono", Menlo, monospace;

  --fs-h1:    32px;
  --fs-h2:    20px;
  --fs-h3:    16px;
  --fs-body:  14px;
  --fs-small: 12px;
  --fs-tiny:  11px;

  /* ─── Espaçamento ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  /* ─── Bordas e sombras ─── */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow:     0 4px 12px rgba(0, 0, 0, 0.30);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.40);
}

/* Compatibilidade com variáveis legacy do index.html antigo */
:root {
  --purple:    var(--accent);
  --red:       var(--sev-critical);
  --green:     var(--status-green);
  --yellow:    var(--sev-major);
  --muted:     var(--text-muted);
  --panel-bg:  var(--bg-panel);
}