/* ============================================================
   ATG Supply Chain — Typography System
   ------------------------------------------------------------
   Fonte única da verdade para tipografia do projeto: fontes,
   escala de tamanhos, pesos, espaçamentos e classes utilitárias.
   Extraído da página de login e pensado para ser reaproveitado
   em qualquer página nova do projeto.

   Como usar:
   1) Carregue os tokens de design ANTES deste arquivo (cores,
      espaçamento, raio — a tipografia depende deles) e as fontes
      no <head>:
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="assets/css/tokens.css">
   2) Inclua este arquivo:
        <link rel="stylesheet" href="assets/css/typography.css">
   3) Use as tags semânticas normalmente (h1, h2, h3, p, small) —
      já saem estilizadas — ou aplique as classes utilitárias
      (prefixo "t-") quando precisar de um estilo específico em
      um elemento diferente (ex.: um <span> parecendo um h2).

   As variáveis de cor (--ink, --muted, --accent...) e de raio
   (--radius) vivem em assets/css/tokens.css, não aqui — este
   arquivo só define o que é especificamente tipográfico.
   ============================================================ */

:root{
  /* ---------- Famílias ---------- */
  --ff-display: 'Space Grotesk', sans-serif;   /* títulos, logo, números de destaque */
  --ff-body: 'Plus Jakarta Sans', sans-serif;  /* texto corrido, formulários, botões */

  /* ---------- Escala de tamanhos ----------
     Nomeada por papel (não por px) pra ficar fácil de reusar
     em qualquer página, mesmo que o valor exato mude no futuro. */
  --fs-display-1: clamp(30px, 3.4vw, 46px);  /* H1 de destaque (hero) */
  --fs-display-2: clamp(24px, 3vw, 30px);    /* H2 de seção */
  --fs-display-3: 22px;                      /* H3 / títulos de card */
  --fs-numeral: 26px;                        /* números grandes (estatísticas, KPIs) */
  --fs-logo: 19px;                           /* wordmark da marca */
  --fs-body-lg: 16px;                        /* parágrafo de destaque (lead) */
  --fs-body: 14.5px;                         /* parágrafo padrão / campos de formulário */
  --fs-button: 14px;                         /* botão secundário (não uppercase) */
  --fs-button-pill: 13px;                    /* botão primário (pill, uppercase) */
  --fs-label: 13px;                          /* label de campo */
  --fs-body-sm: 13.5px;                      /* texto auxiliar (rodapé, linhas de opção) */
  --fs-overline: 12.5px;                     /* eyebrow / divisor / apoio de formulário */
  --fs-caption: 11.5px;                      /* texto legal / notas de rodapé */
  --fs-micro: 9.5px;                         /* tagline miniatura (abaixo do logo) */

  /* ---------- Pesos ---------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---------- Espaçamento entre letras ---------- */
  --ls-tight: -0.01em;   /* títulos display */
  --ls-normal: 0;
  --ls-wide: .02em;
  --ls-wider: .06em;     /* uppercase pequeno (botão pill, divisor) */
  --ls-widest: .14em;    /* eyebrow */
  --ls-ultra: .18em;     /* tagline micro */

  /* ---------- Altura de linha ---------- */
  --lh-tight: 1.1;   /* títulos */
  --lh-base: 1.5;    /* texto corrido */
  --lh-relaxed: 1.6; /* legendas / texto legal */
}

/* ---------- Reset mínimo relacionado a texto ---------- */
*{ box-sizing:border-box; }
body{
  font-family:var(--ff-body);
  color:var(--ink);
  line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#ffffff; }

/* ---------- Padrão para tags semânticas ---------- */
h1,h2,h3{
  font-family:var(--ff-display);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  color:var(--ink);
}
h1{ font-size:var(--fs-display-1); }
h2{ font-size:var(--fs-display-2); }
h3{ font-size:var(--fs-display-3); }
p{ color:var(--muted); font-size:var(--fs-body); }
small{ font-size:var(--fs-caption); }

/* ============================================================
   Classes utilitárias — prefixo "t-"
   Use quando precisar aplicar um estilo tipográfico a um
   elemento que não é a tag semântica padrão (ex.: <span
   class="t-overline">), ou pra sobrepor o padrão.
   ============================================================ */

.t-display-1{ font-family:var(--ff-display); font-weight:var(--fw-semibold); font-size:var(--fs-display-1); line-height:var(--lh-tight); letter-spacing:var(--ls-tight); color:var(--ink); }
.t-display-2{ font-family:var(--ff-display); font-weight:var(--fw-semibold); font-size:var(--fs-display-2); line-height:var(--lh-tight); letter-spacing:var(--ls-tight); color:var(--ink); }
.t-display-3{ font-family:var(--ff-display); font-weight:var(--fw-semibold); font-size:var(--fs-display-3); line-height:var(--lh-tight); letter-spacing:var(--ls-tight); color:var(--ink); }

.t-numeral{ font-family:var(--ff-display); font-weight:var(--fw-semibold); font-size:var(--fs-numeral); line-height:var(--lh-tight); color:var(--ink); }
.t-logo{ font-family:var(--ff-display); font-weight:var(--fw-bold); font-size:var(--fs-logo); color:var(--ink); }

.t-body-lg{ font-family:var(--ff-body); font-weight:var(--fw-regular); font-size:var(--fs-body-lg); line-height:var(--lh-base); color:var(--muted); }
.t-body{ font-family:var(--ff-body); font-weight:var(--fw-regular); font-size:var(--fs-body); line-height:var(--lh-base); color:var(--muted); }
.t-body-sm{ font-family:var(--ff-body); font-weight:var(--fw-regular); font-size:var(--fs-body-sm); line-height:var(--lh-base); color:var(--muted); }

.t-label{ font-family:var(--ff-body); font-weight:var(--fw-semibold); font-size:var(--fs-label); color:#2b2f35; }

.t-button{ font-family:var(--ff-body); font-weight:var(--fw-semibold); font-size:var(--fs-button); letter-spacing:var(--ls-normal); text-transform:none; }
.t-button-pill{ font-family:var(--ff-body); font-weight:var(--fw-bold); font-size:var(--fs-button-pill); letter-spacing:var(--ls-wider); text-transform:uppercase; }

.t-overline{ font-family:var(--ff-body); font-weight:var(--fw-bold); font-size:var(--fs-overline); letter-spacing:var(--ls-widest); text-transform:uppercase; color:var(--accent-dim); }
.t-overline-muted{ font-family:var(--ff-body); font-weight:var(--fw-bold); font-size:var(--fs-overline); letter-spacing:var(--ls-wider); text-transform:uppercase; color:var(--muted-2); }

.t-caption{ font-family:var(--ff-body); font-weight:var(--fw-regular); font-size:var(--fs-caption); line-height:var(--lh-relaxed); color:var(--muted-2); }
.t-micro{ font-family:var(--ff-body); font-weight:var(--fw-medium); font-size:var(--fs-micro); letter-spacing:var(--ls-ultra); text-transform:uppercase; color:rgba(20,24,29,.55); }

.t-link-accent{ color:var(--accent-dim); font-weight:var(--fw-semibold); }
.t-error{ color:var(--danger); font-size:var(--fs-caption); }