/* ============================================================
   tokens.css
   Fonte de verdade visual do site. Componentes nunca usam hex,
   px ou nome de fonte direto. Sempre var(--token).
   ============================================================ */


/* === Fontes (self-host, latin subset) === */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/newsreader-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/newsreader-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-serif-4-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-serif-4-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}


/* === Tokens === */

:root {

  /* === Cores === */
  --color-bg:           #FAFAF7;
  --color-fg:           #0A0A0A;
  --color-accent:       #1F5959;
  --color-muted:        #6B6B6B;
  --color-surface-alt:  #F0EFE7;
  --color-accent-tint:  rgba(31, 89, 89, 0.2);

  /* === Famílias === */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* === Tipografia desktop (>= 768px) === */
  --text-h1:          96px;
  --text-h2:          56px;
  --text-service-title: 40px;  /* tamanho de componente: título de serviço e e-mail de contato (passo de 40px, cabe em 1 linha na coluna 720) */
  --text-h3:          28px;
  --text-body:        20px;
  --text-lead:        26px;
  --text-blockquote:  24px;
  --text-caption:     14px;
  --text-code:        14px;

  /* === Tipografia mobile (< 768px) === */
  --text-h1-mobile:         40px;
  --text-h2-mobile:         28px;
  --text-h3-mobile:         22px;
  --text-body-mobile:       18px;
  --text-body-post-mobile:  17px;
  --text-caption-mobile:    12px;

  /* === Tipografia de post (template /artigos/[slug]; estende a escala) ===
     Título reusa --text-h2 (56) no desktop; mobile precisa de passo próprio.
     h3 do artigo reusa --text-h3 / --text-h3-mobile. */
  --text-post-title-mobile:  40px;  /* título do post no mobile */
  --text-post-h2:            40px;  /* h2 interno do artigo (desktop) */
  --text-post-h2-mobile:     28px;
  --text-post-h3:            28px;  /* h3 interno do artigo (desktop) = --text-h3 */
  --text-post-h3-mobile:     22px;

  /* === Line height === */
  --lh-heading:  1.2;
  --lh-body:     1.55;
  --lh-lead:     1.4;
  --lh-display:  1.05;
  --lh-caption:  1;

  /* === Letter spacing === */
  --ls-caption: 0.08em;

  /* === Transição === */
  --transition-duration: 200ms;
  --transition-ease:     ease;

  /* === Spacing === */
  --space-xs:     8px;
  --space-tight:  12px;
  --space-sm:     16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  120px;

  /* Gap nav->hero no desktop: passo entre md e lg para o hero caber na
     primeira dobra de notebook sem espremer o bloco. Só desktop. */
  --space-hero-top:  40px;

  /* === Caption marker === */
  --marker-width:   24px;
  --marker-height:  2px;
  --marker-gap:     12px;

  /* === Separador accent do lead de post (40x2) === */
  --lead-rule-width:  40px;

  /* === Formulário === */
  --textarea-min-height:         140px;  /* desktop */
  --textarea-min-height-mobile:  120px;

  /* === Avatar do hero === */
  --avatar-size-mobile:  200px;
  --avatar-size:         320px;

  /* === Underline de link === */
  --underline-thickness:  1px;
  --underline-offset:     0.15em;

  /* === Layout === */
  --content-width:         720px;
  --content-width-mobile:  342px;
  --page-padding-x:        24px;
  --measure-narrow:        540px;  /* medida de leitura curta: descritor do hero */

  /* === Breakpoint (documental; usar 768px literal em @media) === */
  --bp-mobile: 768px;
}


/* === Reset === */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
ul, ol, dl {
  margin: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--text-body-mobile);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (min-width: 768px) {
  body {
    font-size: var(--text-body);
  }
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
  background-image: linear-gradient(var(--color-accent-tint), var(--color-accent-tint));
  background-repeat: no-repeat;
  background-size: 0 0.5em;
  background-position: 0 92%;
  transition: background-size var(--transition-duration) var(--transition-ease);
  padding-inline: 2px;
  margin-inline: -2px;
}

a:hover {
  background-size: 100% 0.5em;
  color: var(--color-fg);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}