@charset "UTF-8";
/* ==========================================================================
   sgm-tokens.css — as decisões de design do SGM, em um lugar só
   --------------------------------------------------------------------------
   NOMES ALINHADOS AO PADRÃO DA CASA

   O projeto Angular modelo (gitlab.fiorilli.com.br/angular/modelo) consome
   @fiorilli/template/styles/tokens.css e referencia os tokens por estes
   nomes — conferidos em header-actions.component.{html,scss}:

       --color-primary-500     --color-surface          --app-header-fg
       --color-on-surface      --color-surface-sunken   --app-header-hover
       --color-on-surface-muted
       --color-outline

   Adotamos a mesma nomenclatura aqui, ainda que o Web2 seja Delphi/uniGUI.
   O ganho é concreto: quando o SGM migrar para Angular, o CSS já fala a
   mesma língua do @fiorilli/template e a troca é de valores, não de nomes.

   ⚠️ OS VALORES ABAIXO SÃO NOSSOS, NÃO OS OFICIAIS.
   O tokens.css do @fiorilli/template não pôde ser lido (o pacote está em
   registry privado). Os valores vieram dos formulários já aprovados em
   HTML\CardPaciente\ e do modelo de login enviado pelo Rodrigo. Quando o
   arquivo oficial estiver disponível, é AQUI que se troca — e só aqui.
   ========================================================================== */

:root {
  /* ---- superfícies -------------------------------------------------------
     Três camadas: o fundo da aplicação, a superfície de conteúdo e a
     rebaixada (cabeçalho de tabela, rodapé de card, campo de busca). */
  --color-background:      #eef2f7;
  --color-surface:         #ffffff;
  --color-surface-sunken:  #f7f9fc;

  /* ---- tinta sobre superfície ---- */
  --color-on-surface:          #16202b;
  --color-on-surface-variant:  #46586b;
  --color-on-surface-muted:    #6b7c8f;

  /* ---- traços ---- */
  --color-outline:         #e2e9f0;
  --color-outline-strong:  #cfdae5;

  /* ---- primária: só ação principal, seleção e estado ----
     A escala segue o padrão da casa (…-50, -100, -500, -600). */
  --color-primary-50:   #e6f5f2;
  --color-primary-100:  #b9e0d9;
  --color-primary-500:  #0f766e;
  --color-primary-600:  #0b5d57;
  --color-on-primary:   #ffffff;

  /* ---- semântica de estado ---- */
  --color-error:            #b42318;
  --color-error-container:  #fef3f2;
  --color-error-outline:    #fbd3ce;
  --color-warning:          #b54708;
  --color-warning-container:#fffaeb;
  --color-warning-outline:  #fdecc8;
  --color-success:          #027a48;
  --color-success-container:#ecfdf3;
  --color-success-outline:  #c5efd9;
  --color-info:             #175cd3;
  --color-info-container:   #eff6ff;
  --color-info-outline:     #cfe0fb;

  /* ---- cabeçalho e barra lateral ----
     --app-header-* existe no modelo Angular; --app-sidebar-* é nosso, porque
     lá a navegação é do @fiorilli/template. Mesmo prefixo por coerência. */
  --app-header-bg:        #ffffff;
  --app-header-fg:        #16202b;
  --app-header-hover:     #f7f9fc;

  --app-sidebar-bg:       #10312f;
  --app-sidebar-hover:    #17403d;
  --app-sidebar-outline:  rgba(255, 255, 255, .10);
  --app-sidebar-fg:       #eaf4f2;
  --app-sidebar-fg-muted: #9dbdb8;

  /* ---- séries de gráfico ----------------------------------------------
     Ordem fixa, nunca cíclica. Validada para banda de luminosidade, piso de
     croma, separação protan/deutan e visão normal sobre superfície branca.
     Em pizza e dispersão, só os três primeiros dispensam rótulo direto. */
  --chart-1: #0d9488;
  --chart-2: #eb6834;
  --chart-3: #2a78d6;
  --chart-4: #eda100;
  --chart-5: #e87ba4;
  --chart-6: #008300;
  --chart-7: #4a3aa7;
  --chart-8: #e34948;

  /* ---- tipografia -----------------------------------------------------
     Uma família. Escala fixa em rem (1.125), não fluida: o operador fica em
     DPI constante e um título que encolhe dentro de um painel piora a leitura. */
  --sgm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --sgm-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

  --sgm-t-xs:   0.6875rem;  /* 11px — rótulo de eixo, chip */
  --sgm-t-sm:   0.75rem;    /* 12px — apoio, legenda */
  --sgm-t-base: 0.8125rem;  /* 13px — corpo da interface */
  --sgm-t-md:   0.9375rem;  /* 15px — título de card */
  --sgm-t-lg:   1.125rem;   /* 18px — título de seção */
  --sgm-t-xl:   1.5rem;     /* 24px — título de tela */
  --sgm-t-2xl:  2rem;       /* 32px — número em destaque */

  --sgm-lh-tight: 1.25;
  --sgm-lh:       1.5;

  /* ---- espaçamento: escala de 4 ---- */
  --sgm-1:  4px;
  --sgm-2:  8px;
  --sgm-3:  12px;
  --sgm-4:  16px;
  --sgm-5:  20px;
  --sgm-6:  24px;
  --sgm-8:  32px;
  --sgm-10: 40px;
  --sgm-12: 48px;

  /* ---- forma ---- */
  --sgm-r-sm:  8px;
  --sgm-r:     12px;
  --sgm-r-lg:  16px;
  --sgm-r-xl:  20px;
  --sgm-r-pill: 999px;

  /* ---- profundidade: sempre deslocamento + desfoque ---- */
  --sgm-sh-1: 0 1px 2px rgba(16, 24, 40, .05);
  --sgm-sh-2: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .06);
  --sgm-sh-3: 0 2px 4px rgba(16, 24, 40, .05), 0 12px 28px rgba(16, 24, 40, .10);
  --sgm-sh-4: 0 4px 8px rgba(16, 24, 40, .06), 0 24px 48px rgba(16, 24, 40, .14);
  --sgm-ring: 0 0 0 3px rgba(15, 118, 110, .18);

  /* ---- medidas do shell ---- */
  --sgm-topbar-h:    56px;
  --sgm-sidebar-w:   264px;
  --sgm-sidebar-mini: 68px;

  /* ---- movimento: 150–250ms, o usuário está em fluxo ---- */
  --sgm-fast:   140ms;
  --sgm-normal: 200ms;
  --sgm-slow:   260ms;
  --sgm-ease:   cubic-bezier(.32, .72, 0, 1);

  --sgm-z-drawer:  60;
  --sgm-z-overlay: 55;
  --sgm-z-topbar:  50;
  --sgm-z-popover: 70;
  --sgm-z-toast:   80;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sgm-fast:   1ms;
    --sgm-normal: 1ms;
    --sgm-slow:   1ms;
  }
}