/* =============================================================================
   Design System da Plataforma SBP - tokens
   Versão 1.1.3

   Fonte da verdade visual: referencia/login-referencia.png
   Âncora da cor institucional: os ativos oficiais da marca em assets/

   As cores marcadas como "medido" foram extraídas por amostragem de pixels dos
   mockups aprovados. A família navy é ancorada no ativo oficial da marca, não no
   mockup. As demais cores são derivadas para completar as escalas e para atender
   aos mínimos de contraste da WCAG 2.1 AA.

   Este arquivo contém apenas tokens. Os estilos de componente ficam em
   sbp-components.css.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     1. Paleta primitiva
     Não consumir estes tokens direto na UI. Use os tokens semânticos da seção 2.
     --------------------------------------------------------------------------- */

  /* Cor da marca. Referência de identidade, não token de interface:
     nunca aplicar diretamente em componente. A família navy deriva daqui. */
  --sbp-brand-ink: #04025B;  /* tinta do logo-sbp-blue.webp */
  --sbp-brand-bg:  #0D024C;  /* fundo do app-icon-p.png oficial */

  /* Navy institucional, ancorado na marca */
  --sbp-navy-950: #06012E;
  --sbp-navy-900: #0D024C; /* ativo oficial: fundo do app-icon */
  --sbp-navy-800: #150A60;
  --sbp-navy-700: #1E1478;
  --sbp-navy-600: #281E90;
  --sbp-navy-500: #3429A8;

  /* Azul de ação */
  --sbp-primary-50:  #EAF2FE; /* medido */
  --sbp-primary-100: #DBE5FD;
  --sbp-primary-200: #BCCCFA;
  --sbp-primary-300: #8AA4F2;
  --sbp-primary-400: #4A6FE0;
  --sbp-primary-500: #2A4CD4;
  --sbp-primary-600: #1337C6; /* medido: botão Entrar. Núcleo da marca de ação */
  --sbp-primary-700: #0F2CA3;
  --sbp-primary-800: #0C2382;
  --sbp-primary-900: #0A1C68;

  /* Turquesa de acento */
  --sbp-turquoise-100: #D6FAF6;
  --sbp-turquoise-300: #7CF0E6;
  --sbp-turquoise-400: #45E7D9; /* medido: destaque tipográfico do login */
  --sbp-turquoise-500: #1CCBBD;
  --sbp-turquoise-600: #0FA69B;
  --sbp-turquoise-700: #0C7F78; /* único tom válido para texto sobre branco */

  /* Semânticas */
  --sbp-success-50:  #EAF9EE; /* medido */
  --sbp-success-500: #2E9D5D; /* medido */
  --sbp-success-600: #1F8449;
  --sbp-success-700: #17673A;

  --sbp-warning-50:  #FEF4E5; /* medido */
  --sbp-warning-500: #F68309; /* medido */
  --sbp-warning-600: #C96A05;
  --sbp-warning-700: #96500A;

  --sbp-danger-50:  #FEEEED; /* medido */
  --sbp-danger-500: #E04340;
  --sbp-danger-600: #CC2425; /* medido */
  --sbp-danger-700: #A31B1C;

  /* Neutros azulados */
  --sbp-neutral-0:   #FFFFFF;
  --sbp-neutral-25:  #FAFBFD; /* medido: fundo de página */
  --sbp-neutral-50:  #F5F7FB;
  --sbp-neutral-100: #EDF0F5; /* medido: borda de card */
  --sbp-neutral-200: #E3E7F1; /* medido: borda de campo */
  --sbp-neutral-300: #CBD2E2;
  --sbp-neutral-400: #888FAF; /* menor tom com 3:1 sobre branco */
  --sbp-neutral-500: #757BA6; /* medido: label de tabela */
  --sbp-neutral-600: #646B94; /* menor tom com 4.5:1 sobre branco */
  --sbp-neutral-700: #4A5480;
  --sbp-neutral-800: #2A3357;
  --sbp-neutral-900: #131C41;

  /* Paleta categórica de gráficos, cinco séries, nesta ordem.
     Verificada em deuteranopia e protanopia (Delta E mínimo 25), em escala de
     cinza (separação de luminância 0,047) e em contraste sobre branco (mínimo
     3,19, exigido pela WCAG 1.4.11 para elementos gráficos).
     Estes tons não são os das famílias semânticas: o âmbar de badge #F68309
     tem só 2,57:1 e reprova como série de gráfico. */
  --sbp-chart-1: #2A4CD4; /* azul de ação, primary-500 */
  --sbp-chart-2: #34A867; /* verde */
  --sbp-chart-3: #AE323F; /* vermelho */
  --sbp-chart-4: #0FA69B; /* turquesa, turquoise-600 */
  --sbp-chart-5: #DB5B06; /* âmbar */

  /* ---------------------------------------------------------------------------
     2. Tokens semânticos
     Esta é a camada que a UI consome.
     --------------------------------------------------------------------------- */

  /* Superfícies */
  --sbp-surface-page:        var(--sbp-neutral-25);
  --sbp-surface-raised:      var(--sbp-neutral-0);
  --sbp-surface-sunken:      var(--sbp-neutral-50);
  --sbp-surface-inverse:     var(--sbp-navy-900);
  --sbp-surface-inverse-alt: var(--sbp-navy-800);
  --sbp-surface-selected:    var(--sbp-primary-50);
  --sbp-surface-overlay:     rgba(13, 2, 76, 0.48);

  /* Bordas */
  --sbp-border-subtle:     var(--sbp-neutral-100);
  --sbp-border-default:    var(--sbp-neutral-200);
  --sbp-border-control:    var(--sbp-neutral-400); /* campos: mínimo 3:1 (WCAG 1.4.11) */
  --sbp-border-strong:     var(--sbp-neutral-700);
  --sbp-border-focus:      var(--sbp-primary-600);
  --sbp-border-on-inverse: rgba(255, 255, 255, 0.14);

  /* Texto */
  --sbp-text-primary:     var(--sbp-navy-900);    /* 18.58:1 sobre branco */
  --sbp-text-secondary:   var(--sbp-neutral-700); /*  7.31:1 */
  --sbp-text-tertiary:    var(--sbp-neutral-600); /*  5.16:1 */
  --sbp-text-placeholder: var(--sbp-neutral-500); /*  4.09:1 - somente texto não essencial */
  --sbp-text-disabled:    var(--sbp-neutral-400);
  --sbp-text-link:        var(--sbp-primary-600);
  --sbp-link-underline-offset: 3px;
  --sbp-link-underline-thickness: 1px;
  --sbp-link-underline-thickness-hover: 1.5px;

  --sbp-text-on-inverse:        var(--sbp-neutral-0);
  --sbp-text-on-inverse-muted:  #B9C3DE;
  --sbp-text-on-inverse-accent: var(--sbp-turquoise-400);

  /* Ações */
  --sbp-action-primary-bg:        var(--sbp-primary-600);
  --sbp-action-primary-bg-hover:  var(--sbp-primary-700);
  --sbp-action-primary-bg-active: var(--sbp-primary-800);
  --sbp-action-primary-fg:        var(--sbp-neutral-0);
  --sbp-action-secondary-bg:      var(--sbp-neutral-0);
  --sbp-action-secondary-fg:      var(--sbp-primary-600);
  --sbp-action-destructive-bg:    var(--sbp-danger-600);
  --sbp-action-destructive-fg:    var(--sbp-neutral-0);

  /* Estados: fg para texto, bg para fundo, dot para o indicador circular.
     O dot existe para que o estado nunca dependa só da cor. */
  --sbp-status-success-fg:  var(--sbp-success-700);
  --sbp-status-success-bg:  var(--sbp-success-50);
  --sbp-status-success-dot: var(--sbp-success-500);

  --sbp-status-warning-fg:  var(--sbp-warning-700);
  --sbp-status-warning-bg:  var(--sbp-warning-50);
  --sbp-status-warning-dot: var(--sbp-warning-500);

  --sbp-status-danger-fg:   var(--sbp-danger-700);
  --sbp-status-danger-bg:   var(--sbp-danger-50);
  --sbp-status-danger-dot:  var(--sbp-danger-600);

  --sbp-status-info-fg:     var(--sbp-primary-700);
  --sbp-status-info-bg:     var(--sbp-primary-50);
  --sbp-status-info-dot:    var(--sbp-primary-600);

  --sbp-status-neutral-fg:  var(--sbp-neutral-700);
  --sbp-status-neutral-bg:  var(--sbp-neutral-100);
  --sbp-status-neutral-dot: var(--sbp-neutral-500);

  /* Foco */
  --sbp-focus-ring:      0 0 0 3px rgba(19, 55, 198, 0.30);
  --sbp-focus-ring-dark: 0 0 0 3px rgba(69, 231, 217, 0.45);

  /* ---------------------------------------------------------------------------
     3. Tipografia
     --------------------------------------------------------------------------- */
  --sbp-font-display: Figtree, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --sbp-font-text:    Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --sbp-font-mono:    "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  --sbp-text-display-lg: 700 40px/48px var(--sbp-font-display);
  --sbp-text-display:    700 32px/40px var(--sbp-font-display);
  --sbp-text-h1:         700 28px/36px var(--sbp-font-display);
  --sbp-text-h2:         600 24px/32px var(--sbp-font-display);
  --sbp-text-h3:         600 20px/28px var(--sbp-font-display);
  --sbp-text-h4:         600 18px/26px var(--sbp-font-display);
  --sbp-text-body-lg:    400 16px/24px var(--sbp-font-text);
  --sbp-text-body:       400 14px/22px var(--sbp-font-text);
  --sbp-text-body-sm:    400 13px/20px var(--sbp-font-text);
  --sbp-text-label:      600 13px/18px var(--sbp-font-text);
  --sbp-text-caption:    500 12px/16px var(--sbp-font-text);
  --sbp-text-overline:   600 11px/16px var(--sbp-font-text);
  --sbp-text-metric:     700 32px/38px var(--sbp-font-display);

  --sbp-tracking-tight:  -0.02em;
  --sbp-tracking-snug:   -0.01em;
  --sbp-tracking-wide:    0.06em;

  /* ---------------------------------------------------------------------------
     4. Espaçamento, raio, sombra
     --------------------------------------------------------------------------- */
  --sbp-space-1:  4px;
  --sbp-space-2:  8px;
  --sbp-space-3:  12px;
  --sbp-space-4:  16px;
  --sbp-space-5:  20px;
  --sbp-space-6:  24px;
  --sbp-space-8:  32px;
  --sbp-space-10: 40px;
  --sbp-space-12: 48px;
  --sbp-space-16: 64px;
  --sbp-space-20: 80px;

  --sbp-radius-xs:      4px;
  --sbp-radius-sm:      6px;
  --sbp-radius-control: 10px;
  --sbp-radius-card:    14px;
  --sbp-radius-lg:      18px;
  --sbp-radius-xl:      24px;
  --sbp-radius-full:    9999px;

  --sbp-shadow-xs:    0 1px 2px rgba(13, 2, 76, 0.05);
  --sbp-shadow-sm:    0 1px 3px rgba(13, 2, 76, 0.06), 0 1px 2px rgba(13, 2, 76, 0.04);
  --sbp-shadow-md:    0 4px 12px rgba(13, 2, 76, 0.07);
  --sbp-shadow-lg:    0 12px 28px rgba(13, 2, 76, 0.10);
  --sbp-shadow-xl:    0 24px 48px rgba(13, 2, 76, 0.14);
  --sbp-shadow-inset: inset 0 1px 2px rgba(13, 2, 76, 0.06);

  /* Premium visual hierarchy */
  --sbp-surface-app:          #F6F8FC;
  --sbp-surface-section:      #FCFDFF;
  --sbp-surface-section-alt:  #F7F9FD;
  --sbp-surface-topbar:       rgba(255, 255, 255, 0.96);
  --sbp-surface-inverse-hover: rgba(255, 255, 255, 0.055);
  --sbp-surface-inverse-selected: rgba(255, 255, 255, 0.075);
  --sbp-border-hairline:      rgba(13, 2, 76, 0.08);
  --sbp-border-inverse-soft:  rgba(255, 255, 255, 0.10);
  --sbp-accent-rail:          var(--sbp-turquoise-400);
  --sbp-progress-track:       #E9EDF5;
  --sbp-chart-grid:           #E6EBF4;
  --sbp-chart-axis:           #7B84A3;
  --sbp-chart-area:           rgba(19, 55, 198, 0.10);
  --sbp-chart-area-end:       rgba(19, 55, 198, 0);
  --sbp-shadow-card-subtle:   0 1px 2px rgba(13, 2, 76, 0.025), 0 8px 20px rgba(13, 2, 76, 0.03);
  --sbp-shadow-hero:          0 14px 34px rgba(13, 2, 76, 0.08), 0 2px 5px rgba(13, 2, 76, 0.03);
  --sbp-shadow-topbar:        0 1px 0 rgba(13, 2, 76, 0.05);

  /* Scrollbars: um único padrão visual em toda a aplicação, usando a sidebar
     como referência. A mesma geometria, opacidade progressiva e trilho
     transparente são usados em superfícies claras e navy. O tom translúcido
     reage naturalmente ao fundo sem criar duas famílias visuais distintas. */
  --sbp-scrollbar-size:                10px;
  --sbp-scrollbar-inset:               2px;
  --sbp-scrollbar-track:               transparent;
  --sbp-scrollbar-thumb:               rgba(160, 170, 196, 0.36);
  --sbp-scrollbar-thumb-hover:         rgba(160, 170, 196, 0.56);
  --sbp-scrollbar-thumb-active:        rgba(160, 170, 196, 0.70);
  --sbp-scrollbar-thumb-inverse:       var(--sbp-scrollbar-thumb);
  --sbp-scrollbar-thumb-inverse-hover: var(--sbp-scrollbar-thumb-hover);
  --sbp-scrollbar-thumb-inverse-active:var(--sbp-scrollbar-thumb-active);

  /* ---------------------------------------------------------------------------
     5. Layout
     --------------------------------------------------------------------------- */
  --sbp-sidebar-width:           248px;
  --sbp-sidebar-width-collapsed: 72px;
  --sbp-header-height:           64px;
  --sbp-topbar-action-size:      36px;
  --sbp-topbar-search-height:    40px;
  --sbp-topbar-avatar-size:      38px;
  --sbp-topbar-mobile-height:    100px;
  --sbp-topbar-notifications-width: 430px;
  --sbp-topbar-account-width:    330px;
  --sbp-topbar-menu-max-height:  392px;
  --sbp-topbar-search-width:     720px;
  --sbp-topbar-search-max-height: 470px;
  --sbp-topbar-pointer-size:     12px;
  --sbp-topbar-pointer-offset:   -7px;
  --sbp-notification-item-icon-size: 42px;
  --sbp-notification-unread-size:    8px;
  --sbp-content-max-width:       1540px;
  --sbp-gutter:                  24px;

  --sbp-control-height-sm: 32px;
  --sbp-control-height-md: 40px;
  --sbp-control-height-lg: 48px;
  --sbp-touch-target-min:  44px;

  --sbp-shell-transition: 220ms cubic-bezier(0.2, 0, 0, 1);
  --sbp-sidebar-logo-width: 42px;
  --sbp-sidebar-logo-width-collapsed: 38px;

  /* ---------------------------------------------------------------------------
     6. Movimento
     --------------------------------------------------------------------------- */
  --sbp-duration-instant: 80ms;
  --sbp-duration-fast:    140ms;
  --sbp-duration-normal:  220ms;
  --sbp-duration-slow:    320ms;

  --sbp-ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --sbp-ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --sbp-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);

  /* ---------------------------------------------------------------------------
     7. Camadas
     --------------------------------------------------------------------------- */
  --sbp-z-raised:  10;
  --sbp-z-sticky:  100;
  --sbp-z-header:  200;
  --sbp-z-drawer:  300;
  --sbp-z-overlay: 400;
  --sbp-z-modal:   500;
  --sbp-z-popover: 600;
  --sbp-z-toast:   700;
  --sbp-z-tooltip: 800;

  /* Gradiente do painel institucional, reproduzindo o do login */
  --sbp-gradient-institucional: linear-gradient(160deg, var(--sbp-navy-900) 0%, var(--sbp-navy-800) 100%);
}

/* -----------------------------------------------------------------------------
   Contexto invertido: aplique .sbp-inverse na sidebar e em painéis navy.
   Os tokens de texto e borda são remapeados; os componentes internos não mudam.
   ----------------------------------------------------------------------------- */
.sbp-inverse {
  --sbp-surface-raised:   var(--sbp-navy-800);
  --sbp-surface-page:     var(--sbp-navy-900);
  --sbp-text-primary:     var(--sbp-text-on-inverse);
  --sbp-text-secondary:   var(--sbp-text-on-inverse-muted);
  --sbp-text-tertiary:    var(--sbp-text-on-inverse-muted);
  --sbp-border-default:   var(--sbp-border-on-inverse);
  --sbp-border-subtle:    var(--sbp-border-on-inverse);
  --sbp-focus-ring:       var(--sbp-focus-ring-dark);
  --sbp-scrollbar-thumb:        var(--sbp-scrollbar-thumb-inverse);
  --sbp-scrollbar-thumb-hover:  var(--sbp-scrollbar-thumb-inverse-hover);
  --sbp-scrollbar-thumb-active: var(--sbp-scrollbar-thumb-inverse-active);

  background: var(--sbp-gradient-institucional);
  color: var(--sbp-text-on-inverse);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sbp-duration-instant: 0.01ms;
    --sbp-duration-fast:    0.01ms;
    --sbp-duration-normal:  0.01ms;
    --sbp-duration-slow:    0.01ms;
  }
}