/* ============================================================
   COMANDO 360 — design tokens (TEMA CLARO · V1B)
   AÇÃO PRIMÁRIA = GRAFITE/INK (botões, foco, ativo): UI calma e premium.
   VERMELHO = ASSINATURA/ACENTO pontual (--accent): "360", barra do item
   ativo, detalhe do radar, "hoje" do gráfico — NUNCA cor primária de UI.
   Grafite/branco/cinzas = estrutura. Mobile-first, alto contraste.
   Semânticas preservadas: verde=ok · amarelo=atenção · VERMELHO=erro
   (--red-*, distinto do vermelho de marca).
   ============================================================ */
:root {
  /* Paleta COMANDO (referência do manual de identidade aprovado) */
  --comando-black:    #0C0D10;
  --comando-ink:      #16181C;
  --comando-ink-2:    #1B1E22;
  --comando-steel:    #2A2E35;
  --comando-fog:      #8A9099;
  --comando-white:    #F4F5F6;
  --comando-paper:    #F5F6F7;
  --comando-red:      #E11C24;
  --comando-red-deep: #A50F18;
  /* V1C — superfícies grafite REFINADAS (profundidade/camadas, não preto chapado).
     Preto absoluto (#0C0D10) só pontual (logo/detalhe); base escura usa grafite com variação. */
  --comando-ink-soft: #1D2026;
  --comando-panel:    #20242B;
  --comando-border:   #DDE1E7;
  --comando-muted:    #667085;
  --comando-card:     #FFFFFF;
  --comando-red-soft: rgba(225, 28, 36, 0.10);

  /* AÇÃO PRIMÁRIA = GRAFITE/INK (não vermelho). Os nomes --brand-* (usados em todo o app
     para botão/ativo/foco/seleção/links) resolvem para grafite → a UI fica calma/premium,
     sem leitura de alerta. Tons 50–200 = cinzas claros neutros (seleção/foco). O vermelho
     vira --accent (abaixo), aplicado pontualmente. Marca ≠ erro (--red-*). */
  --brand-50:  #F1F2F3;
  --brand-100: #E4E6E9;
  --brand-200: #CDD0D5;
  --brand-500: #4B515A;
  --brand-600: #1F2228;  /* ação primária: botão · ativo · foco · links (grafite) */
  --brand-700: #0C0D10;  /* hover / pressionado (quase preto) */
  --brand-900: #0C0D10;

  /* ACENTO de marca (ASSINATURA) — vermelho COMANDO, com parcimônia:
     logo "360", barra do item ativo, sweep do radar, "hoje" do gráfico. */
  --accent:      #E11C24;
  --accent-deep: #A50F18;

  /* Tinta / neutros — GRAFITE NEUTRO (sem tom azul slate); base escura = ink COMANDO.
     Luminâncias alinhadas ao ramp anterior → contraste/legibilidade preservados. */
  --ink-900: #16181C;
  --ink-800: #1F2228;
  --ink-700: #33373E;
  --ink-600: #4B515A;
  --ink-500: #6B7280;
  --ink-400: #969CA5;
  --ink-300: #CDD0D5;
  --ink-200: #E4E6E9;
  --ink-100: #F1F2F3;
  --ink-50:  #F8F9FA;

  /* Semânticas (preservadas — significado nunca muda) */
  --green-700: #047857;
  --green-600: #059669;
  --green-100: #D1FAE5;
  --green-50:  #ECFDF5;
  --red-700:   #B91C1C;
  --red-600:   #DC2626;
  --red-100:   #FEE2E2;
  --red-50:    #FEF2F2;
  --amber-700: #B45309;
  --amber-600: #D97706;
  --amber-100: #FEF3C7;
  --amber-50:  #FFFBEB;
  --blue-700:  #1D4ED8;
  --blue-600:  #2563EB;
  --blue-100:  #DBEAFE;
  --blue-50:   #EFF6FF;
  --violet-600:#7C3AED;
  --violet-100:#EDE9FE;
  --wa-green:  #25D366;

  /* Superfícies */
  --bg:        var(--comando-paper);   /* canvas claro neutro */
  --surface:   #FFFFFF;
  --sidebar:   #16181C;

  /* Tipografia — mantém Inter (já carregada; performance). Archivo/Barlow do manual = pendência futura. */
  --font: 'Inter', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.8125rem;  /* 13 */
  --fs-base: 0.9375rem;/* 15 */
  --fs-md: 1.0625rem;  /* 17 */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-xl: 1.5rem;     /* 24 */
  --fs-2xl: 1.875rem;  /* 30 */

  /* Espaçamento */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;

  /* Raios */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;

  /* Sombras (neutras) */
  --sh-sm: 0 1px 2px rgba(12, 13, 16, 0.06);
  --sh-md: 0 4px 12px rgba(12, 13, 16, 0.08);
  --sh-lg: 0 12px 32px rgba(12, 13, 16, 0.16);
  --sh-brand: 0 4px 14px rgba(12, 13, 16, 0.18);

  /* Métricas de toque (mobile-first) */
  --touch: 44px;
  --sidebar-w: 250px;
  --rail-w: 78px;        /* sidebar compacta do tablet (768–959px) */
  --bottomnav-h: 64px;
}