/* ============================================================================
   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;

  /* Layout */
  --gutter: clamp(28px, 6vw, 96px);
  --col-max: 1280px;

  /* 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;
}