/* ============================================================================
   JOIN' — design tokens (single source of truth)
   Servido em produção a partir de /brand/tokens.css (build copia brand/ → dist/).
   Importe no topo de cada app:
       <link rel="stylesheet" href="/brand/tokens.css">
       <link rel="stylesheet" href="/brand/join-os.css">
   Famílias de texto (Fraunces variável + Plus Jakarta Sans) continuam vindo do
   Google Fonts via <link>. Só o WORDMARK é self-hosted (Fraunces SuperSoft).
   ============================================================================ */

/* ── Wordmark: Fraunces 72pt SuperSoft (SOFT=100), weight 400 ─────────────── */
@font-face {
  font-family: "Fraunces SuperSoft";
  src: url("/brand/fonts/Fraunces_72pt_SuperSoft-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens base ──────────────────────────────────────────────────────────── */
:root {
  /* Famílias */
  --f:  'Fraunces', Georgia, serif;                  /* display / serif    */
  --j:  'Plus Jakarta Sans', system-ui, sans-serif;  /* corpo / UI         */
  --os: 'Fraunces SuperSoft', 'Fraunces', Georgia, serif; /* wordmark JOIN'OS */
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Espaço — escala base 4, 10 degraus, razão ~1,5 a partir de 12.
     Todo padding, margin e gap usa um degrau. Valor fora da escala só como
     clamp() entre dois degraus vizinhos. Filetes ≤ 2 px (borda, hairline) ficam
     fora da escala. Papéis: 4–8 micro (dentro do componente) · 12–16 entre itens
     · 24–32 entre componentes e padding de cartão · 48–64 entre grupos e blocos
     de texto · 96–128 entre seções.
     Origem: skill join-whitespace (24/10/2026); gate: lint_joinos R9. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout: um gutter e uma coluna, em tudo (site, vitrine, kit). --gutter-s não existe. */
  --gutter: clamp(28px, 6vw, 96px);
  --col-max: 1280px;
  /* Medida de texto ≈ 70 caracteres na Plus Jakarta Sans (E3 / L50). Em em, nunca em ch (ch mede o "0") nem px fixo. */
  --measure: 36em;

  /* Raio / sombra / transição padrão */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 8px 40px rgba(0,0,0,.12);
  --ease: .3s cubic-bezier(.4,0,.2,1);
}

/* ── Tema (padrão = dark) ─────────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg:#0A0A0A; --fg:#F5F4F0;
  --s:#141414;  --s2:#1A1A1A;
  --rule:rgba(245,244,240,.10);
  --muted:rgba(245,244,240,.45);
  --faint:rgba(245,244,240,.22);
}
[data-theme="light"] {
  --bg:#F5F4F0; --fg:#0A0A0A;
  --s:#ECEAE4;  --s2:#E4E2DC;
  --rule:rgba(10,10,10,.10);
  --muted:rgba(10,10,10,.45);
  --faint:rgba(10,10,10,.22);
}

/* ── i18n (PT/EN) ─────────────────────────────────────────────────────────── */
[data-lang="pt"] .en { display:none; }
[data-lang="en"] .pt { display:none; }

/* ── Reset + base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--j);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background var(--ease), color var(--ease);
}

/* Helper de serif display (Fraunces). Mantido p/ compat com markup existente. */
.fr {
  font-family: var(--f);
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}