/* ------------------------------------------------------------------
   Galo Bravo — camada de marca para o dossier catraias.
   Tokens vindos do "Galo Bravo Design System" (Claude Design),
   projeto 6cb2eff3-a055-4c6d-a539-b5140491eddb.
   Versão contida: fundações apenas — tipo, cor, espaço, cantos.
   Sem colagem, sem texturas, sem raios, sem tipo ransom.
   ------------------------------------------------------------------ */

/* ---------- fontes ----------
   Três faces, três funções:
   · Newsreader  — títulos e citações. Serif de texto com eixos ópticos.
   · Overpass Mono — corpo, etiquetas, tabelas, UI. É o que o sistema pede.
   · BN Carta Noir — só a marca. É face de logótipo, não de texto corrido.
   -------------------------------------------------------------------- */
@font-face{
  font-family:"Newsreader";
  src:url("/brand/fonts/Newsreader.woff2") format("woff2-variations");
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("/brand/fonts/Newsreader-Italic.woff2") format("woff2-variations");
  font-weight:200 800; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Overpass Mono";
  src:url("/brand/fonts/OverpassMono.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}
/* Proprietária. Assim que estiver em /brand/fonts/BNCartaNoir-Bold.otf,
   a marca no topo passa a usá-la. Até lá cai no Overpass Mono. */
@font-face{
  font-family:"BN Carta Noir";
  src:url("/brand/fonts/BNCartaNoir-Bold.otf") format("opentype");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- tokens do sistema (verbatim) ---------- */
:root{
  --gb-red:#E7121E; --gb-red-deep:#960001; --gb-red-shape:#E2191F;
  --gb-yellow:#E8BB2E;
  --gb-black:#31291C;        /* preto de marca — quente */
  --gb-black-pure:#0D0D0D;   /* preto a sério — superfícies escuras */
  --gb-ink:#31291C; --gb-white:#FFFFFF;
  --gb-paper:#F7F7F7; --gb-paper-warm:#EFEBE2; --gb-paper-aged:#E2DCCF;
  --gb-grey-900:#1A1A1A; --gb-grey-700:#4A4A4A; --gb-grey-500:#8A8A8A;
  --gb-grey-300:#C7C7C7; --gb-grey-150:#E6E6E6;

  --font-display:"BN Carta Noir","Overpass Mono",ui-monospace,monospace;
  --font-mono:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-text:"Newsreader",Georgia,"Times New Roman",serif;

  --ls-label:0.18em; --ls-nav:0.08em; --ls-display:-0.02em;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;
  --measure:62ch;

  --radius-0:0px; --radius-sm:2px; --radius-pill:999px;
  --border-w:2px;
  --shadow-paper:2px 4px 14px rgba(13,13,13,.18);
  --ease-snap:cubic-bezier(.2,.9,.1,1);
  --dur-fast:120ms; --dur-base:220ms;
}

/* ---------- mapeamento para as variáveis das páginas ----------
   Claro: papel Galo Bravo, texto quase preto, vermelho como único acento. */
:root{
  --bg:var(--gb-paper);
  --bg-2:var(--gb-grey-150);
  --panel:var(--gb-white);
  --ink:var(--gb-black);
  --body:var(--gb-grey-700);
  --dim:var(--gb-grey-500);
  --faint:color-mix(in srgb, var(--gb-grey-500) 74%, var(--gb-paper));
  --line:var(--gb-grey-150);
  --line-2:var(--gb-grey-300);

  --amber:var(--gb-red);
  --amber-soft:color-mix(in srgb, var(--gb-red) 9%, var(--gb-paper));
  --teal:var(--gb-red-deep);
  --teal-soft:color-mix(in srgb, var(--gb-yellow) 24%, var(--gb-paper));

  --accent:var(--amber);
  --accent-soft:var(--amber-soft);
  --bad:var(--gb-red-deep);
  --bad-soft:color-mix(in srgb, var(--gb-red) 11%, var(--gb-paper));

  --serif:var(--font-text);        /* títulos e citações */
  --sans:var(--font-mono);         /* corpo, etiquetas, tabelas */
  --brand-face:var(--font-display);/* só a marca no topo */
}

/* Escuro: papel preto, amarelo como acento — é o lockup amarelo da marca. */
:root[data-theme="dark"]{
  --bg:var(--gb-black-pure);
  --bg-2:color-mix(in srgb, var(--gb-paper) 9%, var(--gb-black-pure));
  --panel:color-mix(in srgb, var(--gb-paper) 5%, var(--gb-black-pure));
  --ink:var(--gb-paper);
  --body:var(--gb-grey-300);
  --dim:var(--gb-grey-500);
  --faint:color-mix(in srgb, var(--gb-grey-500) 78%, var(--gb-black-pure));
  --line:color-mix(in srgb, var(--gb-paper) 13%, var(--gb-black-pure));
  --line-2:color-mix(in srgb, var(--gb-paper) 24%, var(--gb-black-pure));

  --amber:var(--gb-yellow);
  --amber-soft:color-mix(in srgb, var(--gb-yellow) 15%, var(--gb-black-pure));
  --teal:color-mix(in srgb, var(--gb-red) 72%, var(--gb-paper));
  --teal-soft:color-mix(in srgb, var(--gb-red) 20%, var(--gb-black-pure));

  --accent:var(--amber);
  --accent-soft:var(--amber-soft);
  --bad:color-mix(in srgb, var(--gb-red) 70%, var(--gb-paper));
  --bad-soft:color-mix(in srgb, var(--gb-red) 20%, var(--gb-black-pure));
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--gb-black-pure);
    --bg-2:color-mix(in srgb, var(--gb-paper) 9%, var(--gb-black-pure));
    --panel:color-mix(in srgb, var(--gb-paper) 5%, var(--gb-black-pure));
    --ink:var(--gb-paper);
    --body:var(--gb-grey-300);
    --dim:var(--gb-grey-500);
    --faint:color-mix(in srgb, var(--gb-grey-500) 78%, var(--gb-black-pure));
    --line:color-mix(in srgb, var(--gb-paper) 13%, var(--gb-black-pure));
    --line-2:color-mix(in srgb, var(--gb-paper) 24%, var(--gb-black-pure));
    --amber:var(--gb-yellow);
    --amber-soft:color-mix(in srgb, var(--gb-yellow) 15%, var(--gb-black-pure));
    --teal:color-mix(in srgb, var(--gb-red) 72%, var(--gb-paper));
    --teal-soft:color-mix(in srgb, var(--gb-red) 20%, var(--gb-black-pure));
    --accent:var(--amber); --accent-soft:var(--amber-soft);
    --bad:color-mix(in srgb, var(--gb-red) 70%, var(--gb-paper));
    --bad-soft:color-mix(in srgb, var(--gb-red) 20%, var(--gb-black-pure));
  }
}

/* ---------- ajustes de leitura ----------
   Mono corrido a 15.5px cansa. O sistema pede mono em tudo, por isso
   compensa-se com corpo mais pequeno e entrelinha maior. */
body{font-size:14.5px;line-height:1.78;letter-spacing:-.004em}
.brand{font-family:var(--brand-face)!important}
/* Newsreader tem eixo óptico: títulos grandes querem opsz alto. */
.doc h2,.hero h1,h1{font-variation-settings:"opsz" 36}
.doc h3{font-variation-settings:"opsz" 20}
.doc blockquote{font-variation-settings:"opsz" 16}
.doc h2,.doc h3,.doc h4,h1{letter-spacing:var(--ls-display)}
.ey,.lbl,label,.tag,.src,.badge{letter-spacing:var(--ls-label)}
.tb-link{letter-spacing:var(--ls-nav)}

/* marca no canto */
.gb-mark{position:fixed;left:15px;bottom:13px;width:19px;height:23px;z-index:40;
  pointer-events:none;background:var(--faint);opacity:.55;
  -webkit-mask:url("/brand/galo-mark.svg") center/contain no-repeat;
          mask:url("/brand/galo-mark.svg") center/contain no-repeat}
@media(max-width:1080px){.gb-mark{display:none}}
@media print{.gb-mark{display:none}}


/* ---------- raciocínio: interpretação e hipótese ----------
   São leitura nossa, não fonte. Ficam com aspeto de bloco de código,
   para nunca se confundirem com o que está sustentado. */
.doc p.rz{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-left:var(--border-w) solid var(--rz);
  border-radius:var(--radius-sm);
  padding:12px 15px;
  margin:18px 0;
  font-size:13.2px;
  line-height:1.7;
  color:var(--body);
}
.doc p.rz > code:first-child{
  display:inline-block;
  background:none;
  border:0;
  padding:0;
  margin-right:2px;
  color:var(--rz);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
}
.doc p.rz-interp{--rz:var(--gb-red-deep)}
.doc p.rz-hip{--rz:var(--gb-yellow)}
:root[data-theme="dark"] .doc p.rz-interp{--rz:color-mix(in srgb,var(--gb-red) 74%,var(--gb-paper))}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .doc p.rz-interp{--rz:color-mix(in srgb,var(--gb-red) 74%,var(--gb-paper))}
}