/* ============================================================
   Design Tokens - NGT (BlueIntelligence) refactor visual
   Fonte: BlueIntelligence.WEB.QT/mockups/tokens.css (validado)
   ------------------------------------------------------------
   Estes tokens substituem cores/spacing/tipografia hard-coded
   nas páginas refatoradas. Páginas legadas continuam a usar
   Bootstrap por baixo até serem migradas fase a fase.
   ============================================================ */

:root {
  /* Paleta primária - AskBlue alinhada ao Figma be3 */
  --ab-blue-50:  #EEF1FF;
  --ab-blue-100: #DCE3FF;
  --ab-blue-200: #B6C2FF;
  --ab-blue-300: #8B9CFF;
  --ab-blue-400: #5B6EFF;
  --ab-blue-500: #2D3FE7;
  --ab-blue-600: #1E2DD0;
  --ab-blue-700: #1622A8;
  --ab-blue-900: #0B1273;

  /* Neutros */
  --ab-gray-50:  #F6F7FB;
  --ab-gray-100: #EEF0F4;
  --ab-gray-200: #E2E5EB;
  --ab-gray-300: #C9CED7;
  --ab-gray-400: #9AA3B2;
  --ab-gray-500: #6B7280;
  --ab-gray-700: #2A2F3A;
  --ab-gray-900: #0F1320;

  /* Semânticos - light (default) */
  --color-bg:            var(--ab-gray-50);
  --color-surface:       #FFFFFF;
  --color-surface-alt:   var(--ab-gray-100);
  --color-fg:            var(--ab-gray-900);
  --color-fg-muted:      var(--ab-gray-500);
  --color-border:        var(--ab-gray-200);
  --color-border-strong: var(--ab-gray-300);
  --color-primary:       var(--ab-blue-500);
  --color-primary-hover: var(--ab-blue-600);
  --color-primary-soft:  var(--ab-blue-50);
  --color-primary-fg:    #FFFFFF;
  --color-success:       #1FA971;
  --color-warning:       #E0A800;
  --color-danger:        #DC3545;
  --color-info:          var(--ab-blue-500);

  /* Tipografia */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(15, 19, 32, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 19, 32, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 19, 32, 0.12);

  /* Transições */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;
}

[data-theme="dark"] {
  --color-bg:            #0B0F1A;
  --color-surface:       #131826;
  --color-surface-alt:   #1B2233;
  --color-fg:            #E6E8EE;
  --color-fg-muted:      #9AA3B2;
  --color-border:        #232B3D;
  --color-border-strong: #2D374D;
  --color-primary:       var(--ab-blue-400);
  --color-primary-hover: var(--ab-blue-300);
  --color-primary-soft:  rgba(91, 110, 255, 0.12);
  --color-primary-fg:    #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}