/* GERADO a partir do repositorio medguide-design-system (tokens.css) — NÃO EDITE AQUI. Edite src/, rode build.py la, e ferramentas/sincroniza_ds.py aqui · versao 8bb5db7e */
/* MedGuide Design System
   tokens.css — versao 0.2.2 — gerado em 2026-09-12
   ARQUIVO GERADO. Nao edite: mexa em src/ e rode build.py.
*/
/* ==========================================================================
   MedGuide Design System — tokens (FONTE ÚNICA) · v0.2
   --------------------------------------------------------------------------
   Toda cor, espaço, raio, sombra e camada do produto sai daqui.
   Regras:
   - Tela nunca usa hex solto: usa um token semântico (--mg-action, --mg-text…).
   - Paleta crua (--mg-teal-*, --mg-navy-*) só é usada DENTRO deste arquivo,
     para compor os semânticos. Se uma tela ou componente precisa de uma cor que
     não existe como semântico, falta um token — crie aqui.
   - Contraste é conferido por ferramentas/contraste.py (o validador reprova).
     Texto: 4,5:1. Borda de controle, ícone e texto grande: 3:1 (WCAG 1.4.11).
   Origem das cores: pixels do logo (teal #37AEAA, navy #233B56), 11/09/2026.
   ========================================================================== */

:root {
  /* ---- Paleta crua: TEAL (ação) — 500 é o teal exato do logo ------------- */
  --mg-teal-50:  #F0FAF9;
  --mg-teal-100: #DCF2F1;
  --mg-teal-200: #BAE5E3;
  --mg-teal-300: #8DD3D0;
  --mg-teal-400: #5EC0BC;
  --mg-teal-500: #37AEAA; /* logo — decorativo; NÃO passa com texto branco (2,7:1) */
  --mg-teal-600: #1C7C78; /* botão primário — primeiro tom que passa AA com branco (5,0:1) */
  --mg-teal-700: #196B69;
  --mg-teal-800: #155654;
  --mg-teal-900: #123F3E;

  /* ---- Paleta crua: NAVY (estrutura e neutros) — 800 é o navy do logo ---- */
  /* Os neutros do produto SÃO o navy dessaturado: mesma matiz do slate que o
     sistema já usa (≈212°), então trocar slate por navy não muda a cara da tela. */
  --mg-navy-50:  #F5F7FA;
  --mg-navy-100: #E8EDF2;
  --mg-navy-200: #D2DBE5;
  --mg-navy-300: #ADBCCD;
  --mg-navy-400: #7C93AB;
  --mg-navy-450: #6D86A2; /* borda de controle: 3,5:1 no fundo e 3,8:1 no branco */
  --mg-navy-500: #56718F;
  --mg-navy-600: #405A77;
  --mg-navy-700: #304864;
  --mg-navy-800: #233B56; /* logo */
  --mg-navy-900: #182A3F;
  --mg-navy-950: #0F1B29;

  /* ======================= SEMÂNTICOS (use estes) ======================== */

  /* Ação: botão primário, link, seleção, foco */
  --mg-action:          var(--mg-teal-600);
  --mg-action-hover:    var(--mg-teal-700);
  --mg-action-active:   var(--mg-teal-800);
  --mg-on-action:       #FFFFFF;
  --mg-action-text:     var(--mg-teal-700); /* link/ícone de ação sobre fundo claro */
  --mg-action-subtle:   var(--mg-teal-50);  /* fundo de item selecionado */
  --mg-action-border:   var(--mg-teal-200);
  --mg-brand:           var(--mg-teal-500); /* marca/decoração — nunca com texto branco */

  /* Texto e ícone sobre qualquer cor sólida escura (badge sólido, avatar escuro) */
  --mg-on-strong:       #FFFFFF;

  /* Estrutura: sidebar, topbar, rodapé */
  --mg-chrome:          var(--mg-navy-800);
  --mg-chrome-hover:    var(--mg-navy-700);
  --mg-chrome-active:   var(--mg-navy-900);
  --mg-on-chrome:       #FFFFFF;
  --mg-on-chrome-muted: var(--mg-navy-200);

  /* Superfícies */
  --mg-bg:              var(--mg-navy-50);
  --mg-surface:         #FFFFFF;
  --mg-surface-2:       var(--mg-navy-50);
  --mg-surface-3:       var(--mg-navy-100);
  --mg-overlay:         rgba(15, 27, 41, 0.55); /* navy-950 a 55% */

  /* Bordas: decorativa (divide áreas) × de controle (identifica um campo) */
  --mg-border:          var(--mg-navy-100);
  --mg-border-strong:   var(--mg-navy-200);
  --mg-control-border:        var(--mg-navy-450);
  --mg-control-border-hover:  var(--mg-navy-600);
  --mg-control-off:           var(--mg-navy-450); /* trilho do interruptor desligado */

  /* Texto */
  --mg-text:            var(--mg-navy-900);
  --mg-text-2:          var(--mg-navy-700);
  --mg-text-muted:      var(--mg-navy-500); /* menor tom que ainda passa AA em branco E em --mg-bg */
  --mg-text-disabled:   var(--mg-navy-300); /* só para controle desabilitado (isento de contraste) */

  /* Foco: contorno sólido (sobrevive ao alto contraste do Windows; glow não) */
  --mg-focus-color:     var(--mg-action);
  --mg-focus-width:     2px;
  --mg-focus-offset:    2px;

  /* Feedback — cada um tem: forte (fundo sólido), texto, fundo suave, borda */
  --mg-success:         #15803D;
  --mg-success-hover:   #166534;  /* mesmo tom do texto: um passo mais escuro */
  --mg-success-text:    #166534;
  --mg-success-subtle:  #F0FDF4;
  --mg-success-border:  #BBF7D0;

  --mg-warning:         #B45309;
  --mg-warning-text:    #92400E;
  --mg-warning-subtle:  #FFFBEB;
  --mg-warning-border:  #FDE68A;

  --mg-danger:          #DC2626;
  --mg-danger-hover:    #B91C1C;
  --mg-danger-text:     #B91C1C;
  --mg-danger-subtle:   #FEF2F2;
  --mg-danger-border:   #FECACA;

  --mg-info:            #2563EB;
  --mg-info-text:       #1D4ED8;
  --mg-info-subtle:     #EFF6FF;
  --mg-info-border:     #BFDBFE;

  /* ---- Tipografia -------------------------------------------------------- */
  /* UI densa (sistema): Inter. Marketing e títulos grandes (site): Plus Jakarta Sans. */
  --mg-font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mg-font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mg-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --mg-text-xs:   0.75rem;   /* 12 — rótulo de tabela, legenda */
  --mg-text-sm:   0.875rem;  /* 14 — corpo padrão do sistema */
  --mg-text-md:   1rem;      /* 16 — corpo do site, título de card, input no celular */
  --mg-text-lg:   1.125rem;  /* 18 */
  --mg-text-xl:   1.25rem;   /* 20 — título de modal */
  --mg-text-2xl:  1.5rem;    /* 24 — título de página */
  --mg-text-3xl:  1.875rem;  /* 30 — site */
  --mg-text-4xl:  2.5rem;    /* 40 — hero do site */

  --mg-weight-regular:  400;
  --mg-weight-medium:   500;
  --mg-weight-semibold: 600;
  --mg-weight-bold:     700;

  --mg-leading-tight:  1.25;
  --mg-leading-normal: 1.5;

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

  /* ---- Raio -------------------------------------------------------------- */
  --mg-radius-sm:   6px;   /* badge, chip */
  --mg-radius-md:   8px;   /* botão, input (= rounded-lg, o mais usado hoje) */
  --mg-radius-lg:   12px;  /* card (= rounded-xl) */
  --mg-radius-xl:   16px;  /* modal */
  --mg-radius-full: 999px;

  /* ---- Sombra ------------------------------------------------------------ */
  --mg-shadow-sm: 0 1px 2px rgba(15, 27, 41, 0.06);
  --mg-shadow-md: 0 4px 12px rgba(15, 27, 41, 0.10), 0 1px 2px rgba(15, 27, 41, 0.06);
  --mg-shadow-lg: 0 12px 32px rgba(15, 27, 41, 0.16), 0 2px 6px rgba(15, 27, 41, 0.06);

  /* ---- Camadas: UMA escala, que CONVIVE com o painel de hoje ------------- */
  /* Medido em 11/09/2026 no clinic-front-sistema: topbar 50, sidebar 40, diálogos
     legados 950 (App.confirm, showLoading, Modal.open) e 1060 (SweetAlert2), avisos
     legados 100000. --mg-z-modal é o MÍNIMO do modal: ao abrir, o mg.js o põe uma
     camada acima de qualquer diálogo visível, então o que abre por último fica por
     cima nos dois sentidos, legado sobre novo e novo sobre legado (2ª revisão, 11/09).
     O aviso do DS fica acima de tudo. Nada de valor literal na tela: use o token.

     Revisto em 12/09/2026, ao medir o SITE institucional, que tem outra escala:
     dropdown 100, sticky 200, cabeçalho fixo 500, fundo de modal 900, modal 1000,
     tooltip 1100, e literais até 10000. Com --mg-z-dropdown em 60, todo menu e toda
     dica do design system abriria ATRÁS do cabeçalho fixo do site — invisível e sem
     receber clique, nas 21 páginas. A escala agora passa por cima dos DOIS anfitriões
     conhecidos, e cada valor diz de quem ele precisa ficar na frente. */
  --mg-z-base:     1;
  --mg-z-sticky:   520;    /* topbar do DS: acima do cabeçalho fixo do site (500) */
  --mg-z-dropdown: 600;    /* menus e dicas: acima de qualquer cabeçalho, abaixo de modal */
  --mg-z-overlay:  910;    /* gaveta lateral: acima do fundo de modal do site (900) */
  --mg-z-modal:    1010;   /* mínimo, acima do modal do site (1000); o mg.js sobe mais */
  --mg-z-toast:    100010; /* acima do aviso legado do painel (100000) e dos 10000 do site */

  /* ---- Movimento --------------------------------------------------------- */
  --mg-duration-fast: 120ms;
  --mg-duration-base: 200ms;
  --mg-duration-slow: 320ms;
  --mg-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- Layout do sistema -------------------------------------------------- */
  /* Hoje main.css e menu.js discordam (--sidebar-w 256 vs 72; topbar 64 vs 56). */
  --mg-topbar-h:          64px;
  --mg-sidebar-w:         256px;
  --mg-sidebar-collapsed: 72px;
  --mg-content-max:       1280px;

  /* ---- Controles --------------------------------------------------------- */
  --mg-control-h-sm: 32px;
  --mg-control-h-md: 40px; /* alvo de toque confortável */
  --mg-control-h-lg: 48px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mg-duration-fast: 0ms;
    --mg-duration-base: 0ms;
    --mg-duration-slow: 0ms;
  }
}