/* ==========================================================================
   FourDesk Help — Sistema tipográfico
   --------------------------------------------------------------------------
   Fonte: Figtree, definida no "Manual de Identidade - FourTec", pág. 7-8.

   O manual registra 7 pesos (Light → Black) e 2 estilos (Normal, Italic), e
   justifica a escolha por um traço específico: a Figtree mantém tamanhos
   consistentes entre maiúsculas e minúsculas, o que sustenta legibilidade em
   corpo pequeno — exatamente o caso desta interface, densa em tabelas.

   Fonte única de verdade para tipografia. Nenhum template deve declarar
   font-family nem font-size em pixel cru: use sempre as variáveis abaixo.

   Como escalar a interface inteira:
     html { font-size: 100%; }     →  padrão (16px de raiz)
     html { font-size: 106.25%; }  →  tudo ~6% maior
     html { font-size: 93.75%;  }  →  tudo ~6% menor
   Os tamanhos estão em rem justamente para isso, e para respeitar o
   tamanho de fonte configurado no navegador do usuário.
   ========================================================================== */

:root {

    /* ---------- Famílias ---------- */

    /* Interface, textos, títulos — tudo usa esta. */
    --font-ui: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto,
               Helvetica, Arial, sans-serif;

    /* Números que precisam alinhar em coluna: KPIs, IDs de chamado,
       relógio do painel NOC. Só para dígitos, nunca para texto corrido. */
    --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas,
                 'Liberation Mono', Menlo, monospace;


    /* ---------- Escala de tamanhos ----------
       Ramp de 13 degraus. Os nomes indicam o PAPEL, não o tamanho, para
       que trocar um valor aqui não obrigue a renomear nada nos templates. */

    --fs-micro:   0.625rem;   /* 10px — selos, legendas de tabela densa    */
    --fs-mini:    0.6875rem;  /* 11px — metadados, timestamps, badges      */
    --fs-small:   0.75rem;    /* 12px — texto auxiliar, rótulos de campo   */
    --fs-body:    0.8125rem;  /* 13px — CORPO PADRÃO da interface          */
    --fs-body-lg: 0.875rem;   /* 14px — corpo em áreas mais respiradas     */
    --fs-lead:    0.9375rem;  /* 15px — texto de abertura, destaque leve   */
    --fs-h6:      1rem;       /* 16px — título de card pequeno             */
    --fs-h5:      1.125rem;   /* 18px — título de card                     */
    --fs-h4:      1.25rem;    /* 20px — título de seção                    */
    --fs-h3:      1.375rem;   /* 22px — título de página                   */
    --fs-h2:      1.75rem;    /* 28px — número de KPI                      */
    --fs-h1:      2rem;       /* 32px — destaque de tela                   */
    --fs-display: 2.25rem;    /* 36px — painel NOC / TV                    */


    /* ---------- Pesos ----------
       Os 7 pesos do manual. Carregamos a Figtree como fonte variável, então
       ter a faixa inteira 300-900 não custa download extra. */

    --fw-light:    300;   /* Light — texto grande e leve       */
    --fw-regular:  400;   /* Regular — corpo de texto          */
    --fw-medium:   500;   /* Medium — rótulos, leve ênfase     */
    --fw-semibold: 600;   /* Semibold — títulos, th de tabela  */
    --fw-bold:     700;   /* Bold — números, ações primárias   */
    --fw-heavy:    800;   /* ExtraBold — KPIs do painel NOC    */
    --fw-black:    900;   /* Black — só display, uso pontual   */


    /* ---------- Alturas de linha ----------
       Proporcionais ao tamanho: texto grande precisa de menos entrelinha
       relativa que texto pequeno. */

    --lh-tight:   1.2;    /* títulos, números grandes          */
    --lh-snug:    1.35;   /* subtítulos, células de tabela     */
    --lh-normal:  1.5;    /* corpo de texto                    */
    --lh-relaxed: 1.65;   /* blocos longos, descrições, e-mail */


    /* ---------- Espaçamento entre letras ----------
       Figtree é levemente mais aberta que Inter: títulos grandes pedem
       um leve aperto, e textos maiúsculos pequenos pedem folga. */

    --ls-tight:  -0.02em;  /* --fs-h2 para cima      */
    --ls-snug:   -0.01em;  /* --fs-h5 a --fs-h3      */
    --ls-normal: 0;        /* corpo                  */
    --ls-caps:   0.04em;   /* TEXTO EM MAIÚSCULAS    */
}


/* ==========================================================================
   Base
   ========================================================================== */

body {
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);

    /* Figtree renderiza melhor com estas duas ligadas */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Elementos de formulário não herdam fonte por padrão em nenhum navegador. */
button,
input,
select,
textarea,
optgroup {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}


/* ==========================================================================
   Títulos
   Escala proporcional: cada degrau mantém a mesma relação com o anterior,
   e a entrelinha aperta conforme o tamanho cresce.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-ui);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-snug);
    margin-top: 0;
}

h1, .h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-tight); }
h2, .h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-tight); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
h5, .h5 { font-size: var(--fs-h5); }
h6, .h6 { font-size: var(--fs-h6); line-height: var(--lh-snug); }


/* ==========================================================================
   Tabelas — onde a densidade importa mais
   ========================================================================== */

table {
    font-size: var(--fs-body);
    line-height: var(--lh-snug);
}

thead th,
table th {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-small);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    line-height: var(--lh-snug);
}

/* Números em coluna alinham pelo dígito, não pela largura variável. */
td.num, th.num, .tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}


/* ==========================================================================
   Utilitários
   Use estes em vez de font-size inline nos templates.
   ========================================================================== */

.t-micro   { font-size: var(--fs-micro);   }
.t-mini    { font-size: var(--fs-mini);    }
.t-small   { font-size: var(--fs-small);   }
.t-body    { font-size: var(--fs-body);    }
.t-body-lg { font-size: var(--fs-body-lg); }
.t-lead    { font-size: var(--fs-lead);    line-height: var(--lh-relaxed); }

.fw-regular  { font-weight: var(--fw-regular);  }
.fw-medium   { font-weight: var(--fw-medium);   }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold);     }

.t-mono  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.t-caps  { text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: var(--fw-semibold); }
.t-muted { color: var(--text-muted); }   /* definido em marca.css */


/* ==========================================================================
   Bootstrap — realinhamento
   O Bootstrap 5 define font-size próprio em vários componentes. Aqui eles
   passam a usar a mesma escala, senão a interface fica com duas tipografias
   convivendo na mesma tela.
   ========================================================================== */

.btn        { font-size: var(--fs-body);  font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.btn-sm     { font-size: var(--fs-small); }
.btn-lg     { font-size: var(--fs-body-lg); }

.form-control, .form-select { font-size: var(--fs-body); line-height: var(--lh-snug); }
.form-control-sm, .form-select-sm { font-size: var(--fs-small); }
.form-label { font-size: var(--fs-small); font-weight: var(--fw-medium); }
.form-text  { font-size: var(--fs-mini);  }

.badge      { font-size: var(--fs-mini);  font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); }
.nav-link   { font-size: var(--fs-body);  font-weight: var(--fw-medium); }
.dropdown-item { font-size: var(--fs-body); }
.modal-title   { font-size: var(--fs-h5); font-weight: var(--fw-semibold); }
.alert      { font-size: var(--fs-body);  }
.table      { font-size: var(--fs-body);  }
.small, small { font-size: var(--fs-small); }


/* ==========================================================================
   Impressão
   Papel comporta mais densidade que tela, e a impressora não tem Figtree —
   o fallback fica com as métricas do sistema.
   ========================================================================== */

@media print {
    body {
        font-size: var(--fs-small);
        line-height: var(--lh-snug);
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    h1, .h1 { font-size: var(--fs-h3); }
    h2, .h2 { font-size: var(--fs-h4); }
    h3, .h3 { font-size: var(--fs-h5); }

    table { font-size: var(--fs-mini); }
}