/* ============================================================
   odiegodiniz — Design Tokens
   Fonte unica de verdade: cor (2 modos), tipo, espaco, motion.
   Direcao: Editorial Neon — Red System.
   Fonte: workspace/.../L2-tactical/brand/brandbook.yaml -> visual_identity
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- COR — Constante (NUNCA muda entre os modos) ---------- */
  --red-deep:   #8E1B22;   /* vermelho estrutural / base — marca primaria */
  --red-vivid:  #EC3A2B;   /* vermelho de acao — CTA, links, interativo   */
  --red-neon:   #FF2D2D;   /* glow de capa (covers/heros/thumbs)          */
  --cyan-rare:  #18B6D8;   /* cor de ocasiao — SO em capas/thumbs visuais */

  /* ---------- TIPO — Familias ---------- */
  --font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TIPO — Escala (base 16) ---------- */
  --text-xs:    12px;   /* mono captions, metadata, codigos de catalogo */
  --text-sm:    14px;
  --text-base:  16px;   /* body */
  --text-lg:    18px;   /* body de leitura longa */
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   32px;
  --text-4xl:   42px;
  --text-5xl:   56px;
  --text-6xl:   72px;
  --text-7xl:   92px;   /* teto de hero */

  /* ---------- TIPO — Line-height ---------- */
  --lh-tight:   0.96;   /* display */
  --lh-snug:    1.05;
  --lh-normal:  1.25;
  --lh-body:    1.6;    /* leitura confortavel */
  --lh-loose:   1.7;

  /* ---------- TIPO — Tracking ---------- */
  --track-display: -0.02em;  /* titulos: aperta */
  --track-mega:    -0.03em;  /* mega type */
  --track-normal:  0;
  --track-mono:    0.06em;   /* labels mono */
  --track-wide:    0.14em;   /* eyebrows */

  /* ---------- ESPACO — grid base 8px ---------- */
  --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;
  --space-11: 192px;

  /* ---------- LAYOUT ---------- */
  --container:      1080px;
  --container-wide: 1320px;
  --gutter:         32px;
  --gutter-mobile:  20px;
  --nav-height:     64px;
  --measure:        64ch;   /* largura maxima de leitura */

  /* ---------- RAIO — quase sempre 0 (geometrico) ---------- */
  --radius-0:    0;
  --radius-xs:   2px;   /* unico raio permitido em cards/capa */

  /* ---------- BORDA ---------- */
  --border-hairline: 1px;
  --border-default:  1px;
  --border-thick:    2px;

  /* ---------- MOTION — minimo, preciso ---------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
  --ease-mech: linear;
  --ease-out:  cubic-bezier(0.2, 0, 0, 1);
}

/* ============================================================
   MODOS — light = casa de leitura | dark = palco
   O vermelho e o ciano permanecem; superficie e texto invertem.
   ============================================================ */

/* --red-text e mode-aware: vermelho de TEXTO troca com o modo para manter
   contraste. Profundo no claro (le bem no creme), vivo no escuro (le bem no
   preto). Use SEMPRE para texto/glifo vermelho. red-neon e red-deep NUNCA
   sao texto: neon e glow, deep e fill. */

[data-theme="light"] {
  --bg:        #EFE9DC;   /* creme / papel quente */
  --surface:   #E5DDCB;   /* superficie elevada   */
  --ink:       #15130F;   /* texto                */
  --ink-soft:  #5C564A;   /* texto secundario     */
  --line:      rgba(21, 19, 15, 0.10);
  --on-red:    #FFFFFF;   /* texto sobre vermelho */
  --red-text:  #8E1B22;   /* texto vermelho legivel no creme */
  --red-text-inv: #EC3A2B; /* para superficies INVERTIDAS (band escura na pagina clara) */
}

[data-theme="dark"] {
  --bg:        #0B0B0D;   /* quase-preto */
  --surface:   #141417;
  --ink:       #EDE6D6;   /* creme       */
  --ink-soft:  #9A958A;
  --line:      rgba(237, 230, 214, 0.10);
  --on-red:    #FFFFFF;
  --red-text:  #EC3A2B;   /* texto vermelho legivel no preto */
  --red-text-inv: #8E1B22; /* para superficies INVERTIDAS (band creme na pagina escura) */
}

/* ============================================================
   Estilos semanticos de tipo — aplicar via classe .t-*
   ============================================================ */

.t-mega {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(56px, 9vw, var(--text-7xl));
  line-height: var(--lh-tight); letter-spacing: var(--track-mega); margin: 0;
}
.t-display {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 6vw, var(--text-6xl));
  line-height: var(--lh-tight); letter-spacing: var(--track-display); margin: 0;
}
.t-h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-5xl); line-height: var(--lh-snug);
  letter-spacing: var(--track-display); margin: 0;
}
.t-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-3xl); line-height: var(--lh-snug);
  letter-spacing: var(--track-display); margin: 0;
}
.t-h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-2xl); line-height: var(--lh-snug); margin: 0;
}
.t-eyebrow {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--text-xs); line-height: 1.2;
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--ink-soft); margin: 0;
}
.t-body {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--text-lg); line-height: var(--lh-body);
  max-width: var(--measure); margin: 0;
}
.t-body-sm {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--text-base); line-height: var(--lh-body); margin: 0;
}
.t-meta {
  font-family: var(--font-mono); font-weight: 400;
  font-size: var(--text-xs); line-height: 1.3;
  letter-spacing: var(--track-mono); color: var(--ink-soft); margin: 0;
}

/* Codigo de catalogo — A0142, C014, T008, O022 */
.t-catalog {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--text-xs); letter-spacing: var(--track-mono);
  color: var(--red-text); text-transform: uppercase;
}

/* ============================================================
   Reset + defaults
   ============================================================ */

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

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--text-base);
  line-height: var(--lh-body);
  transition: background var(--duration-slow) var(--ease-out),
              color var(--duration-slow) var(--ease-out);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,p { margin: 0; }
button { font-family: inherit; }
/* Links NUNCA usam azul de browser — herdam o texto. Cor de link e
   aplicada por classe (nav cinza, CTA vermelho). */
a { color: inherit; text-decoration: none; }
::selection { background: var(--red-vivid); color: #fff; }

/* ---------- Scrollbar da página — discreta, na marca (quadrada, mode-aware) ----------
   Vale para a página inteira. Scrolls internos apertados (toc-rail/subnav) escondem
   a barra e usam fade — eles sobrescrevem com scrollbar-width: none. */
* { scrollbar-width: thin; scrollbar-color: var(--ink) var(--surface); }   /* Firefox */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--ink); border: 3px solid var(--surface); }  /* respiro de 3px = thumb "flutuando" */
::-webkit-scrollbar-thumb:hover { background: var(--red-deep); }
::-webkit-scrollbar-corner { background: var(--surface); }

/* ============================================================
   Utilitarios de marca — a assinatura do sistema
   ============================================================ */

/* ---------- Marca geometrica (quadrado + circulo) ---------- */
.brand-mark {
  width: 16px; height: 16px; background: var(--red-deep);
  display: inline-block; position: relative;
}
.brand-mark::after {
  content: ""; position: absolute; bottom: -5px; right: -5px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--red-vivid);
}

/* ---------- Blocos geometricos (linguagem de formas) ---------- */
.blk-square { width: 56px; height: 56px; background: var(--red-deep); }
.blk-circle { width: 56px; height: 56px; border-radius: 50%; background: var(--red-vivid); }
.blk-line   { width: 80px; height: 4px; background: var(--ink); }

/* ---------- Botoes ---------- */
.btn {
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-base);
  padding: 16px 28px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  letter-spacing: var(--track-display);
  transition: all var(--duration-fast) var(--ease-out);
}
.btn-primary { background: var(--red-vivid); color: var(--on-red); }
.btn-primary:hover { background: var(--red-deep); }
.btn-ghost { background: transparent; color: var(--ink); border: var(--border-default) solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }

/* ---------- Capa neon (Neo-Tokyo controlado) ---------- */
/* Funciona nos dois modos: vira card escuro sobre creme no light. */
.neon-cover {
  background: #0B0B0D; border-radius: var(--radius-xs);
  padding: 38px 32px; position: relative; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 45, 45, 0.20);
}
.neon-cover::before {
  content: ""; position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,45,45,0.33), transparent 70%);
  filter: blur(20px);
}
.neon-cover::after {
  content: ""; position: absolute; bottom: -50px; left: 40%;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(24,182,216,0.27), transparent 70%);
  filter: blur(24px);
}
.neon-cover > * { position: relative; }

/* ---------- Linha de regra (hairline) ---------- */
.rule { height: 1px; background: var(--line); border: 0; }

/* ---------- Tratamento de imagem duotone (preto + vermelho) ---------- */
.duotone {
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: luminosity;
}