/* =============================================
   SouElite BNG – Design Tokens & CSS Variables
   ============================================= */

:root {
  /* Brand Colors */
  --color-primary:        #0B2545;
  --color-primary-dark:   #001529;
  --color-primary-light:  #F0F4F8;
  --color-primary-muted:  rgba(74, 127, 255, 0.1);

  --color-accent:         #4A7FFF;
  --color-accent-dark:    #2A5FFF;
  --color-accent-light:   #EBF0FF;

  --color-secondary:      #1E293B;
  --color-secondary-mid:  #334155;
  --color-secondary-deep: #0F172A;

  /* Semantic */
  --color-success:        #10B981;
  --color-success-light:  #ECFDF5;
  --color-danger:         #EF4444;
  --color-danger-light:   #FEF2F2;
  --color-warning:        #F59E0B;
  --color-warning-light:  #FFFBEB;
  --color-info:           #3B82F6;
  --color-info-light:     #EFF6FF;

  /* Neutrals */
  --color-bg:             #F8FAFC;
  --color-surface:        #ffffff;
  --color-surface-2:      #F1F5F9;
  --color-border:         #E2E8F0;
  --color-border-strong:  #CBD5E1;
  --color-text:           #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted:     #94A3B8;

  /* Sidebar */
  --sidebar-bg:           #0B2545;
  --sidebar-text:         rgba(255, 255, 255, 0.85);
  --sidebar-text-muted:   rgba(255, 255, 255, 0.5);
  --sidebar-hover:        rgba(255, 255, 255, 0.06);
  --sidebar-active:       rgba(255, 255, 255, 0.08);
  --sidebar-active-text:  #FFFFFF;
  --sidebar-width:        248px;
  --sidebar-collapsed:    68px;

  /* Nav item ativo — isolado, não afeta outros elementos */
  --nav-active-bg:        rgba(74, 127, 255, 0.12);
  --nav-active-text:      #4A7FFF;
  --nav-active-border:    #4A7FFF;

  /* Cor do "+ BLU" no logo — isolado */
  --brand-accent-blu:     #4A7FFF;

  /* Typography */
  --font-display:  'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.13);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.07);

  /* Transitions */
  --transition: 0.2s ease;
  --transition-slow: 0.35s ease;

  /* Topbar */
  --topbar-height: 64px;
}