/* ═══════════════════════════════════════════════════════════════════════════
   nexus-tokens.css — fonte única do visual do Nexus (Central, Estoque e Desk).

   Tons do ClioAtende: azul-marinho profundo no fundo, cartões um degrau mais
   claros, bordas azuladas sutis e azul royal nas ações.

   COMO USAR
   • Central e Estoque carregam este arquivo ANTES do CSS da página.
   • Os nomes antigos (--color-*, --est-*, --d-*) continuam existindo, mas agora
     são só apelidos dos tokens --nx-* daqui. Para mudar uma cor, mude aqui.
   • Temas: claro (padrão), escuro ([data-theme="dark"]) e pink ([data-theme="pink"]).
   • O Desk (React/Tailwind) não lê CSS: os mesmos valores estão em
     modulos/desk/tailwind.config.js. O teste testes/design-tokens.test.js
     confere que os dois ficaram iguais.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Marca (iguais nos dois temas) ─────────────────────────────────────── */
  --nx-blue:        #2563EB;   /* azul royal: ações principais */
  --nx-blue-hover:  #1D4ED8;
  --nx-blue-deep:   #1E3A8A;
  --nx-vivid:       #3B82F6;
  --nx-cyan:        #4F8CFF;   /* azul luminoso: foco, ativo, destaques */
  --nx-sky:         #8FB4FF;   /* azul claro: detalhes */

  /* ─── Tema claro (padrão) ───────────────────────────────────────────────── */
  --nx-bg:            #F2F5FB;
  --nx-surface:       #FFFFFF;
  --nx-surface-2:     #F5F7FC;
  --nx-inset:         #FFFFFF;
  --nx-border:        rgba(15, 23, 42, 0.09);
  --nx-border-solid:  #E3E8F2;
  --nx-border-strong: rgba(37, 99, 235, 0.34);

  --nx-text:        #0F172A;
  --nx-muted:       #55657F;
  --nx-faint:       #8593AB;

  --nx-blue-text:   #1D4ED8;   /* azul para TEXTO sobre fundo claro (contraste) */
  --nx-primary-soft:        rgba(37, 99, 235, 0.10);
  --nx-primary-soft-border: rgba(37, 99, 235, 0.28);

  --nx-success: #059669;  --nx-success-soft: #ECFDF5;
  --nx-warning: #D97706;  --nx-warning-soft: #FFFBEB;
  --nx-danger:  #DC2626;  --nx-danger-soft:  #FEF2F2;
  --nx-info:    #2563EB;  --nx-info-soft:    #EFF6FF;

  --nx-ring:        0 0 0 3px rgba(37, 99, 235, 0.20);
  --nx-glow:        0 0 0 1px rgba(37, 99, 235, 0.28), 0 8px 20px -12px rgba(37, 99, 235, 0.40);
  --nx-shadow-xs:   0 1px 2px rgba(15, 33, 84, 0.06);
  --nx-shadow-sm:   0 1px 3px rgba(15, 33, 84, 0.07), 0 2px 8px rgba(15, 33, 84, 0.04);
  --nx-shadow-md:   0 4px 14px rgba(15, 33, 84, 0.09), 0 2px 4px rgba(15, 33, 84, 0.04);
  --nx-shadow-lg:   0 12px 32px rgba(15, 33, 84, 0.13), 0 4px 10px rgba(15, 33, 84, 0.05);

  /* ─── Barra lateral (azul-marinho escuro nos dois temas) ────────────────── */
  --nx-sidebar-bg:
    radial-gradient(ellipse 90% 40% at 50% 0%, rgba(79, 140, 255, 0.24) 0%, transparent 60%),
    linear-gradient(180deg, #112459 0%, #0E1E4B 55%, #0C1A40 100%);
  --nx-sidebar-border: rgba(99, 132, 255, 0.30);

  /* ─── Botão principal e brilhos: mudam por tema ─────────────────────────── */
  --nx-brand-rgb:      37, 99, 235;
  --nx-accent-rgb:     79, 140, 255;
  --nx-btn-grad:       linear-gradient(180deg, #5B9BFF 0%, #3B82F6 48%, #2563EB 100%);
  --nx-btn-grad-hover: linear-gradient(180deg, #74A9FF 0%, #4F8CFF 48%, #2F6BF0 100%);
  --nx-btn-border:     rgba(79, 140, 255, 0.85);

  --sidebar-width: 260px;
  --header-height: 60px;

  /* ─── Tipografia ────────────────────────────────────────────────────────── */
  --nx-font:      'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --nx-text-xs:   0.72rem;
  --nx-text-sm:   0.82rem;
  --nx-text-base: 0.9rem;
  --nx-text-lg:   1.05rem;
  --nx-text-xl:   1.3rem;
  --nx-text-2xl:  1.7rem;
  --nx-text-3xl:  2.2rem;

  /* ─── Espaçamento (base 4px) ────────────────────────────────────────────── */
  --nx-space-1: 4px;  --nx-space-2: 8px;  --nx-space-3: 12px; --nx-space-4: 16px;
  --nx-space-5: 20px; --nx-space-6: 24px; --nx-space-8: 32px; --nx-space-10: 40px;

  /* ─── Raios ─────────────────────────────────────────────────────────────── */
  --nx-radius-sm: 8px;
  --nx-radius-md: 10px;
  --nx-radius-lg: 14px;
  --nx-radius-xl: 20px;

  /* ─── Movimento ─────────────────────────────────────────────────────────── */
  --nx-ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --nx-dur-fast:  140ms;
  --nx-dur:       220ms;

  /* ═══ Apelidos: Central (--color-*) ═══════════════════════════════════════ */
  --color-primary:        var(--nx-blue);
  --color-primary-dark:   var(--nx-blue-hover);
  --color-primary-deep:   var(--nx-blue-deep);
  --color-primary-light:  var(--nx-vivid);
  --color-primary-bg:     var(--nx-primary-soft);
  --color-primary-border: var(--nx-primary-soft-border);
  --color-accent:         var(--nx-cyan);

  --gradient-brand: linear-gradient(135deg, #0E1A3A 0%, #1E3A8A 45%, #2563EB 100%);
  --gradient-btn:   linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);

  --color-success:  var(--nx-success);
  --color-warning:  var(--nx-warning);
  --color-danger:   var(--nx-danger);
  --color-info:     var(--nx-info);
  --color-success-bg: var(--nx-success-soft);
  --color-warning-bg: var(--nx-warning-soft);
  --color-danger-bg:  var(--nx-danger-soft);
  --color-info-bg:    var(--nx-info-soft);

  --color-text:       var(--nx-text);
  --color-text-muted: var(--nx-muted);
  --color-text-light: var(--nx-faint);

  --color-bg:         var(--nx-bg);
  --color-bg-card:    var(--nx-surface);
  --color-border:     var(--nx-border-solid);
  --color-border-lt:  #EEF1F8;

  --radius-sm: var(--nx-radius-sm);
  --radius-md: var(--nx-radius-md);
  --radius-lg: var(--nx-radius-lg);
  --radius-xl: var(--nx-radius-xl);

  --shadow-xs: var(--nx-shadow-xs);
  --shadow-sm: var(--nx-shadow-sm);
  --shadow-md: var(--nx-shadow-md);
  --shadow-lg: var(--nx-shadow-lg);
  --shadow-primary: 0 4px 14px rgba(37, 99, 235, 0.28);
  --focus-ring: var(--nx-ring);

  --transition: var(--nx-dur) var(--nx-ease);
  --font: var(--nx-font);

  /* ═══ Apelidos: Estoque (--est-*) ═════════════════════════════════════════ */
  --est-primary:       var(--nx-blue);
  --est-primary-dark:  var(--nx-blue-hover);
  --est-primary-mid:   var(--nx-blue-deep);
  --est-primary-light: var(--nx-vivid);
  --est-accent:        var(--nx-cyan);
  --est-bg:            var(--nx-bg);
  --est-panel:         var(--nx-surface);
  --est-text:          var(--nx-text);
  --est-muted:         var(--nx-muted);
  --est-border:        var(--nx-border-solid);
  --est-success:       var(--nx-success);
  --est-warning:       var(--nx-warning);
  --est-danger:        var(--nx-danger);
  --est-shadow:        var(--nx-shadow-md);
  --est-shadow-hover:  var(--nx-shadow-lg);
  --est-focus-ring:    var(--nx-ring);
  --est-gradient:      var(--gradient-brand);
  --est-radius-xl:     18px;
  --est-radius-lg:     var(--nx-radius-lg);
  --est-radius-md:     var(--nx-radius-md);
}

/* ═══ Tema escuro (o pink usa a mesma base e troca só a paleta, mais abaixo) ═════════════════════════════════════════════════════════════ */
[data-theme="dark"],
[data-theme="pink"] {
  --nx-bg:            #070D1C;   /* página: 1º tom (o mais escuro) */
  --nx-surface:       #0E1A3A;   /* cartões: 2º tom */
  --nx-surface-2:     #162A5C;   /* realce, cabeçalho de tabela, hover: 3º tom */
  --nx-inset:         #070D1C;   /* campos */
  --nx-border:        rgba(99, 132, 255, 0.17);
  --nx-border-solid:  #22346E;
  --nx-border-strong: rgba(79, 140, 255, 0.45);

  --nx-text:        #E8EEFF;
  --nx-muted:       #93A1C4;
  --nx-faint:       #6C7AA0;

  --nx-blue-text:   #7FA8FF;
  --nx-primary-soft:        rgba(79, 140, 255, 0.14);
  --nx-primary-soft-border: rgba(79, 140, 255, 0.35);

  --nx-success: #2DD4BF;  --nx-success-soft: rgba(45, 212, 191, 0.12);
  --nx-warning: #FBBF24;  --nx-warning-soft: rgba(251, 191, 36, 0.12);
  --nx-danger:  #F87171;  --nx-danger-soft:  rgba(248, 113, 113, 0.12);
  --nx-info:    #4F8CFF;  --nx-info-soft:    rgba(79, 140, 255, 0.12);

  --nx-ring:        0 0 0 3px rgba(79, 140, 255, 0.28);
  --nx-glow:        0 0 0 1px rgba(79, 140, 255, 0.35), 0 8px 20px -12px rgba(37, 99, 235, 0.45);
  --nx-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.30);
  --nx-shadow-sm:   0 1px 4px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.20);
  --nx-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.20);
  --nx-shadow-lg:   0 10px 28px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.20);

  --color-primary-light:  var(--nx-cyan);
  --color-border-lt:      var(--nx-surface-2);
  --est-primary-light:    var(--nx-cyan);
}

/* ═══ Tema pink (teste de identidade visual) ══════════════════════════════════
   Base escura (todas as regras do tema escuro valem) com rosa quente no lugar do azul:
   fundo grafite-azulado, menu em vinho escuro, ações e destaques em rosa framboesa.
   Referência: tela de Patrimônio enviada em 22/10/2026. */
[data-theme="pink"] {
  --nx-blue:        #E02E78;   /* ações */
  --nx-blue-hover:  #C4246A;
  --nx-blue-deep:   #8E1B50;
  --nx-vivid:       #F0509E;   /* títulos e destaques */
  --nx-cyan:        #F56BAF;
  --nx-sky:         #FF9CCB;

  --nx-bg:            #141823;
  --nx-surface:       #171B27;
  --nx-surface-2:     #232635;
  --nx-inset:         #0F131D;
  --nx-border:        rgba(240, 80, 160, 0.28);
  --nx-border-solid:  #4B2542;
  --nx-border-strong: rgba(240, 80, 160, 0.62);

  --nx-text:        #F1F3FA;
  --nx-muted:       #9AA0B8;
  --nx-faint:       #6E7490;

  --nx-blue-text:   #FF6FB0;
  --nx-primary-soft:        rgba(240, 80, 160, 0.14);
  --nx-primary-soft-border: rgba(240, 80, 160, 0.40);

  --nx-info:    #F0509E;  --nx-info-soft:    rgba(240, 80, 160, 0.12);

  --nx-ring:        0 0 0 3px rgba(240, 80, 160, 0.32);
  --nx-glow:        0 0 0 1px rgba(240, 80, 160, 0.45), 0 8px 22px -12px rgba(224, 46, 120, 0.55);

  --nx-sidebar-bg:
    radial-gradient(ellipse 130% 26% at 0% 0%, rgba(224, 46, 120, 0.38) 0%, transparent 62%),
    radial-gradient(ellipse 120% 30% at 100% 100%, rgba(224, 46, 120, 0.42) 0%, transparent 65%),
    linear-gradient(180deg, #2C1024 0%, #150B15 40%, #130B12 65%, #2A0F22 100%);
  --nx-sidebar-border: rgba(240, 80, 160, 0.22);

  --nx-brand-rgb:      224, 46, 120;
  --nx-accent-rgb:     240, 80, 160;
  --nx-btn-grad:       linear-gradient(180deg, #F0509E 0%, #E02E78 55%, #C4246A 100%);
  --nx-btn-grad-hover: linear-gradient(180deg, #F566AB 0%, #E83D86 55%, #D02C75 100%);
  --nx-btn-border:     rgba(255, 120, 180, 0.55);

  --gradient-brand: linear-gradient(135deg, #2C1024 0%, #8E1B50 50%, #E02E78 100%);
  --gradient-btn:   linear-gradient(180deg, #F0509E 0%, #E02E78 100%);
  --shadow-primary: 0 4px 14px rgba(224, 46, 120, 0.35);
}