/* =====================================================================
   TOFY — Design System compartilhado
   Consumido por todos os subdomínios via:
   <link rel="stylesheet" href="https://www.tofy.com.br/shared/brand.css">

   Fontes: Instrument Sans (texto) + JetBrains Mono (dados, rótulos, URLs)
   ===================================================================== */

:root{
  /* Texto */
  --tofy-ink:#111114;         /* títulos, texto forte */
  --tofy-ink-soft:#3A3A40;    /* parágrafos */
  --tofy-text-2:#585860;      /* texto secundário */
  --tofy-muted:#6E6E76;       /* rótulos */
  --tofy-faint:#9A9AA2;       /* metadados, numeração */

  /* Superfícies e traços */
  --tofy-paper:#FAFAF9;
  --tofy-surface:#FFFFFF;
  --tofy-surface-2:#F4F4F2;
  --tofy-line:#E5E4E0;
  --tofy-line-soft:#EDECE8;
  --tofy-line-strong:#D9D8D3;
  --tofy-grid:#E9E9E4;        /* malha decorativa do hero */

  /* Acento */
  --tofy-accent:#2E5BFF;
  --tofy-accent-rgb:46,91,255;
  --tofy-accent-tint:rgba(46,91,255,.08);
  --tofy-accent-tint-2:rgba(46,91,255,.12);
  --tofy-accent-line:rgba(46,91,255,.40);

  /* Tipografia */
  --tofy-font:"Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tofy-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Forma e movimento */
  --tofy-radius:16px;
  --tofy-radius-sm:8px;
  --tofy-max:1240px;
  --tofy-gutter:32px;
  --tofy-shadow:0 12px 32px rgba(17,17,20,.14);
  --tofy-ease:cubic-bezier(.22,1,.36,1);
  --tofy-header-bg:rgba(255,255,255,.78);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --tofy-ink:#F4F4F2;
    --tofy-ink-soft:#C9C9CE;
    --tofy-text-2:#A8A8B0;
    --tofy-muted:#93939C;
    --tofy-faint:#71717A;
    --tofy-paper:#0C0C0E;
    --tofy-surface:#131316;
    --tofy-surface-2:#1A1A1E;
    --tofy-line:#26262B;
    --tofy-line-soft:#1F1F24;
    --tofy-line-strong:#33333A;
    --tofy-grid:#1B1B20;
    --tofy-accent:#7B93FF;
    --tofy-accent-rgb:123,147,255;
    --tofy-accent-tint:rgba(123,147,255,.10);
    --tofy-accent-tint-2:rgba(123,147,255,.16);
    --tofy-accent-line:rgba(123,147,255,.45);
    --tofy-shadow:0 12px 32px rgba(0,0,0,.45);
    --tofy-header-bg:rgba(19,19,22,.78);
  }
}
:root[data-theme="dark"]{
  --tofy-ink:#F4F4F2;
  --tofy-ink-soft:#C9C9CE;
  --tofy-text-2:#A8A8B0;
  --tofy-muted:#93939C;
  --tofy-faint:#71717A;
  --tofy-paper:#0C0C0E;
  --tofy-surface:#131316;
  --tofy-surface-2:#1A1A1E;
  --tofy-line:#26262B;
  --tofy-line-soft:#1F1F24;
  --tofy-line-strong:#33333A;
  --tofy-grid:#1B1B20;
  --tofy-accent:#7B93FF;
  --tofy-accent-rgb:123,147,255;
  --tofy-accent-tint:rgba(123,147,255,.10);
  --tofy-accent-tint-2:rgba(123,147,255,.16);
  --tofy-accent-line:rgba(123,147,255,.45);
  --tofy-shadow:0 12px 32px rgba(0,0,0,.45);
  --tofy-header-bg:rgba(19,19,22,.78);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--tofy-font);
  background:var(--tofy-paper);
  color:var(--tofy-ink);
  line-height:1.6;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--tofy-ink);text-decoration:none}
::selection{background:var(--tofy-accent);color:#fff}

.tofy-container{width:100%;max-width:var(--tofy-max);margin:0 auto;padding:0 var(--tofy-gutter)}
.tofy-mono{font-family:var(--tofy-mono)}

/* Rótulo de seção: "01 — Manifesto" */
.tofy-label{
  margin:0;font-family:var(--tofy-mono);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tofy-muted);
}

/* ---------- Botões ---------- */
.tofy-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:999px;border:1px solid transparent;
  font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;
  transition:transform .18s var(--tofy-ease), box-shadow .25s var(--tofy-ease),
             background .2s var(--tofy-ease), border-color .2s var(--tofy-ease);
}
.tofy-btn--primary{background:var(--tofy-ink);color:var(--tofy-paper);font-weight:600}
.tofy-btn--primary:hover{transform:translateY(-2px);box-shadow:var(--tofy-shadow);color:var(--tofy-paper)}
.tofy-btn--ghost{border-color:var(--tofy-line-strong);color:var(--tofy-ink)}
.tofy-btn--ghost:hover{border-color:var(--tofy-accent);background:var(--tofy-accent-tint-2)}

/* ---------- Etiquetas de status ---------- */
.tofy-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--tofy-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;border:1px solid var(--tofy-line-strong);
  color:var(--tofy-muted);white-space:nowrap;
}
.tofy-tag--live{
  color:var(--tofy-accent);border-color:var(--tofy-accent-line);background:var(--tofy-accent-tint);
}
.tofy-tag--live::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--tofy-accent);
}
.tofy-tag--soon{border-style:dashed}

/* ---------- Barra de identidade da holding (topo de cada subdomínio) ---------- */
.tofy-bar{
  background:var(--tofy-ink);color:var(--tofy-paper);
  font-family:var(--tofy-mono);font-size:11.5px;letter-spacing:.08em;
}
.tofy-bar .tofy-container{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px 24px;padding-top:11px;padding-bottom:11px;flex-wrap:wrap;
}
.tofy-bar a{color:inherit;opacity:.8;transition:opacity .2s}
.tofy-bar a:hover{opacity:1}
.tofy-bar__brand{display:flex;align-items:center;gap:9px;font-family:var(--tofy-font);font-weight:600;letter-spacing:.26em;font-size:12px;opacity:1}
.tofy-bar__brand svg{width:18px;height:18px}

/* ---------- Animações compartilhadas ---------- */
@keyframes tofyRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes tofyPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
@keyframes tofyMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

:focus-visible{outline:2px solid var(--tofy-accent);outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}