/* ======================================================================
   Mesa do Sócio — Typography System
   ----------------------------------------------------------------------
   Fonte de verdade para novos textos/componentes.

   Este arquivo é intencionalmente conservador:
   - define tokens novos com prefixo --mesa-type-*;
   - expõe classes utilitárias com prefixo .mesa-type-* e .mesa-ui-*;
   - não sobrescreve componentes existentes;
   - não usa !important;
   - não altera body/html;
   - não deve causar mudança visual até que as classes sejam aplicadas.
   ====================================================================== */

:root{
  /* Fontes oficiais */
  --mesa-type-font-ui:'Inter', 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mesa-type-font-display:'DM Serif Display', 'Cormorant Garamond', Georgia, serif;

  /* Pesos */
  --mesa-type-weight-regular:400;
  --mesa-type-weight-medium:500;
  --mesa-type-weight-semibold:600;
  --mesa-type-weight-bold:700;
  --mesa-type-weight-heavy:800;

  /* Escala UI */
  --mesa-type-size-overline:0.5625rem;       /* 9px */
  --mesa-type-size-micro:0.625rem;          /* 10px */
  --mesa-type-size-label:0.6875rem;         /* 11px */
  --mesa-type-size-helper:0.75rem;          /* 12px */
  --mesa-type-size-control:0.8125rem;       /* 13px */
  --mesa-type-size-card:0.9375rem;          /* 15px */
  --mesa-type-size-section:1rem;            /* 16px */
  --mesa-type-size-card-strong:1.125rem;    /* 18px */
  --mesa-type-size-content-kicker:10.5px;
  --mesa-type-size-content-title:15px;
  --mesa-type-size-content-subtitle:12.5px;
  --mesa-type-content-heading-gap:7px;
  --mesa-type-content-copy-max:640px;
  --mesa-type-panel-heading-title-size:24px;
  --mesa-type-panel-heading-subtitle-size:13px;
  --mesa-type-panel-heading-copy-max:760px;
  --mesa-type-panel-heading-gap:4px;
  --mesa-type-panel-heading-action-gap:16px;
  --mesa-type-panel-heading-divider-width:266px;
  --mesa-type-panel-heading-padding-bottom:18px;
  --mesa-type-panel-heading-margin-bottom:20px;

  /* Escala editorial/marca */
  --mesa-type-size-title:clamp(1.25rem, 2.15vw, 2rem);
  --mesa-type-size-display:clamp(1.7rem, 3.2vw, 2.75rem);

  /* Line-height */
  --mesa-type-line-tight:1;
  --mesa-type-line-title:1.08;
  --mesa-type-line-compact:1.2;
  --mesa-type-line-normal:1.35;
  --mesa-type-line-copy:1.45;
  --mesa-type-line-loose:1.6;

  /* Tracking */
  --mesa-type-tracking-none:0;
  --mesa-type-tracking-tight:0.01em;
  --mesa-type-tracking-subtle:0.02em;
  --mesa-type-tracking-ui:0.04em;
  --mesa-type-tracking-label:0.08em;
  --mesa-type-tracking-overline:0.12em;
}

/* Títulos editoriais/marca */
:where(.mesa-type-page-title, .mesa-ui-page-title){
  margin:0;
  font-family:var(--mesa-type-font-display);
  font-size:var(--mesa-type-size-title);
  font-weight:var(--mesa-type-weight-bold);
  letter-spacing:var(--mesa-type-tracking-subtle);
  line-height:var(--mesa-type-line-title);
  color:var(--text);
}

:where(.mesa-type-display-title, .mesa-ui-display-title){
  margin:0;
  font-family:var(--mesa-type-font-display);
  font-size:var(--mesa-type-size-display);
  font-weight:var(--mesa-type-weight-bold);
  letter-spacing:var(--mesa-type-tracking-tight);
  line-height:var(--mesa-type-line-title);
  color:var(--text);
}

/* Hierarquia técnica/UI */
:where(.mesa-type-section-title, .mesa-ui-section-title){
  margin:0;
  font-family:var(--mesa-type-font-ui);
  font-size:var(--mesa-type-size-section);
  font-weight:var(--mesa-type-weight-heavy);
  letter-spacing:var(--mesa-type-tracking-subtle);
  line-height:var(--mesa-type-line-compact);
  color:var(--text);
}

:where(.mesa-type-card-title, .mesa-ui-card-title){
  margin:0;
  font-family:var(--mesa-type-font-ui);
  font-size:var(--mesa-type-size-card);
  font-weight:var(--mesa-type-weight-bold);
  letter-spacing:var(--mesa-type-tracking-none);
  line-height:var(--mesa-type-line-normal);
  color:var(--text);
}

:where(.mesa-type-card-title-strong, .mesa-ui-card-title-strong){
  margin:0;
  font-family:var(--mesa-type-font-ui);
  font-size:var(--mesa-type-size-card-strong);
  font-weight:var(--mesa-type-weight-bold);
  letter-spacing:var(--mesa-type-tracking-tight);
  line-height:var(--mesa-type-line-compact);
  color:var(--text);
}

:where(.mesa-type-subtitle, .mesa-ui-subtitle){
  margin:0;
  font-family:var(--mesa-type-font-ui);
  font-size:var(--mesa-type-size-helper);
  font-weight:var(--mesa-type-weight-medium);
  letter-spacing:var(--mesa-type-tracking-tight);
  line-height:var(--mesa-type-line-copy);
  color:var(--text-mid);
}

/* Cabeçalho funcional composto: kicker + título + subtítulo. */
:where(.mesa-type-content-heading, .mesa-ui-content-heading){
  min-width:0;
  font-family:var(--mesa-type-font-ui);
}

:where(.mesa-type-content-kicker, .mesa-ui-content-kicker){
  margin:0 0 var(--mesa-type-content-heading-gap);
  font-family:var(--mesa-type-font-ui);
  font-size:var(--mesa-type-size-content-kicker);
  font-weight:var(--mesa-type-weight-bold);
  letter-spacing:0.1em;
  line-height:1.1;
  text-transform:uppercase;
  color:var(--text-dim);
}

:where(.mesa-type-content-title, .mesa-ui-content-title){
  margin:0;
  font-family:var(--mesa-type-font-ui);
  font-size:var(--mesa-type-size-content-title);
  font-weight:var(--mesa-type-weight-heavy);
  letter-spacing:var(--mesa-type-tracking-none);
  line-height:var(--mesa-type-line-compact);
  color:var(--text);
}

:where(.mesa-type-content-subtitle, .mesa-ui-content-subtitle){
  max-width:var(--mesa-type-content-copy-max);
  margin:var(--mesa-type-content-heading-gap) 0 0;
  font-family:var(--mesa-type-font-ui);
  font-size:var(--mesa-type-size-content-subtitle);
  font-weight:var(--mesa-type-weight-regular);
  letter-spacing:var(--mesa-type-tracking-none);
  line-height:1.5;
  color:var(--text-mid);
}

/* Cabeçalho padrão de painel: título serif + subtítulo.
   A divisória visual é um elemento real no HTML:
   `.mesa-panel-heading-divider`, centralizado em `mesa-dividers.css`. */
#mesaAppShell .mesa-ui-panel-heading{
  --mesa-panel-heading-divider-width:var(--mesa-type-panel-heading-divider-width);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--mesa-type-panel-heading-action-gap);
  min-width:0;
  margin:0;
  padding:0;
  position:relative;
}

#mesaAppShell .mesa-ui-panel-heading__copy{
  min-width:0;
}

#mesaAppShell .mesa-ui-panel-heading .mesa-ui-panel-heading__title{
  margin:0 0 var(--mesa-type-panel-heading-gap);
  font-family:var(--mesa-type-font-display);
  font-size:var(--mesa-type-panel-heading-title-size);
  font-weight:var(--mesa-type-weight-regular);
  letter-spacing:var(--mesa-type-tracking-none);
  line-height:var(--mesa-type-line-compact);
  text-transform:none;
  color:var(--text);
}

#mesaAppShell .mesa-ui-panel-heading .mesa-ui-panel-heading__subtitle{
  max-width:var(--mesa-type-panel-heading-copy-max);
  margin:0;
  font-family:var(--mesa-type-font-ui);
  font-size:var(--mesa-type-panel-heading-subtitle-size);
  font-weight:var(--mesa-type-weight-regular);
  letter-spacing:var(--mesa-type-tracking-none);
  line-height:1.5;
  color:var(--text-mid);
}

#mesaAppShell .mesa-ui-panel-heading__action{
  flex:0 0 auto;
}

/* Labels e metadados */
:where(.mesa-type-label, .mesa-ui-label){
  display:inline-block;
  font-family:var(--mesa-type-font-ui);
  font-size:var(--mesa-type-size-label);
  font-weight:var(--mesa-type-weight-semibold);
  letter-spacing:var(--mesa-type-tracking-label);
  line-height:var(--mesa-type-line-compact);
  text-transform:uppercase;
  color:var(--text-dim);
}

:where(.mesa-type-toolbar-label, .mesa-ui-toolbar-label, .mesa-type-dropdown-label, .mesa-ui-dropdown-label){
  display:inline-block;
  font-family:var(--mesa-type-font-ui);
  font-size:var(--mesa-type-size-overline);
  font-weight:var(--mesa-type-weight-bold);
  letter-spacing:var(--mesa-type-tracking-overline);
  line-height:var(--mesa-type-line-compact);
  text-transform:uppercase;
  color:var(--text-dim);
}

/* Botões — aplicar no texto/controle novo, sem substituir classes existentes */
:where(.mesa-type-button-primary, .mesa-ui-button-primary-label){
  font-family:var(--mesa-type-font-ui);
  font-size:var(--mesa-type-size-control);
  font-weight:var(--mesa-type-weight-bold);
  letter-spacing:var(--mesa-type-tracking-ui);
  line-height:var(--mesa-type-line-tight);
}

:where(.mesa-type-button-secondary, .mesa-ui-button-secondary-label){
  font-family:var(--mesa-type-font-ui);
  font-size:var(--mesa-type-size-helper);
  font-weight:var(--mesa-type-weight-semibold);
  letter-spacing:var(--mesa-type-tracking-ui);
  line-height:var(--mesa-type-line-tight);
}

/* Dropdowns — padrão real, compacto e ancorado ao trigger */
:where(.mesa-type-dropdown-trigger, .mesa-ui-dropdown-trigger){
  font-family:var(--mesa-type-font-ui);
  font-size:var(--mesa-type-size-control);
  font-weight:var(--mesa-type-weight-semibold);
  letter-spacing:var(--mesa-type-tracking-tight);
  line-height:var(--mesa-type-line-compact);
}

:where(.mesa-type-dropdown-option, .mesa-ui-dropdown-option){
  font-family:var(--mesa-type-font-ui);
  font-size:0.8125rem;
  font-weight:var(--mesa-type-weight-medium);
  letter-spacing:var(--mesa-type-tracking-none);
  line-height:var(--mesa-type-line-compact);
}

/* Badges e chips */
:where(.mesa-type-badge, .mesa-ui-badge){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mesa-type-font-ui);
  font-size:var(--mesa-type-size-micro);
  font-weight:var(--mesa-type-weight-bold);
  letter-spacing:0.06em;
  line-height:var(--mesa-type-line-tight);
  text-transform:uppercase;
}

/* Textos auxiliares */
:where(.mesa-type-helper, .mesa-ui-helper){
  font-family:var(--mesa-type-font-ui);
  font-size:var(--mesa-type-size-helper);
  font-weight:var(--mesa-type-weight-regular);
  letter-spacing:var(--mesa-type-tracking-none);
  line-height:var(--mesa-type-line-copy);
  color:var(--text-mid);
}

:where(.mesa-type-microcopy, .mesa-ui-microcopy){
  font-family:var(--mesa-type-font-ui);
  font-size:var(--mesa-type-size-micro);
  font-weight:var(--mesa-type-weight-regular);
  letter-spacing:var(--mesa-type-tracking-subtle);
  line-height:var(--mesa-type-line-copy);
  color:var(--text-dim);
}

:where(.mesa-type-error, .mesa-ui-error){
  font-family:var(--mesa-type-font-ui);
  font-size:var(--mesa-type-size-helper);
  font-weight:var(--mesa-type-weight-medium);
  letter-spacing:var(--mesa-type-tracking-none);
  line-height:var(--mesa-type-line-copy);
  color:var(--negative, #B42318);
}

/* Utilitários seguros para valores financeiros/tabulares */
:where(.mesa-type-tabular, .mesa-ui-tabular){
  font-variant-numeric:tabular-nums;
}

:where(.mesa-type-truncate, .mesa-ui-truncate){
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width:767px){
  :root{
    --mesa-type-size-section:0.9375rem;
    --mesa-type-size-card:0.875rem;
    --mesa-type-size-control:0.8125rem;
  }

  :where(.mesa-type-dropdown-option, .mesa-ui-dropdown-option){
    font-size:0.8125rem;
  }
}