/* ============================================================
   NÃO TEM TRADUÇÃO — Design System v3
   Linguagem "Fome Sem Fim": azul-céu acolhedor + amarelo-acento,
   Bricolage no talo, kanji como textura, grão sutil, muito respiro.
   Fonte visual única de posts, capas, páginas e criativos.
   Importe este arquivo e use as variáveis; não recopie hex.
   ============================================================ */

@font-face{
  font-family:"Bricolage";
  src:url("fonts/BricolageGrotesque-VF.ttf") format("truetype");
  font-weight:200 800; font-display:swap;
}
@font-face{
  font-family:"Shippori Mincho";
  src:url("fonts/ShipporiMincho-Medium.ttf") format("truetype");
  font-weight:500; font-display:swap;
}

:root{
  /* ---------- COR: base ---------- */
  --paper:#F7F5EE;      /* branco quente e limpo — fundo principal claro */
  --paper-2:#EEEADE;    /* papel um passo mais fundo — painéis, zebra */
  --paper-3:#E4DFCF;    /* borda quente / divisória sobre claro */
  --ink:#151824;        /* azul-preto — texto sobre claro */
  --ink-soft:#565B6B;   /* cinza-azulado — secundário, captions */

  /* ---------- COR: azul (primária) ---------- */
  --blue:#2B54CE;       /* azul-confiança — CTA, links, acento primário */
  --blue-deep:#152257;  /* azul profundo — bandas escuras, texto sobre céu */
  --sky-1:#BFD4F2;      /* topo do céu (hero) */
  --sky-2:#E7EEF9;      /* base do céu, funde no papel */
  --blue-soft:#6E97E8;  /* azul claro de apoio, arte de card */

  /* ---------- COR: amarelo (acento, NUNCA fundo de página) ---------- */
  --yellow:#F4C13C;     /* amarelo-marca-texto / acento quente */
  --yellow-deep:#B98A12;/* variante escura p/ TEXTO sobre claro (contraste AA) */
  --sun:#EE9F3B;        /* laranja-sol — pop quente em arte */
  --teal:#2E8C86;       /* verde-azulado — 3ª cor de apoio na arte */

  /* ---------- COR: selo ---------- */
  --beni:#9E2A2B;       /* vermelho-hanko — só no selo, 1 forma cerimonial */

  /* ---------- COR: aliases semânticos ---------- */
  --bg:            var(--paper);
  --bg-panel:      #ffffff;
  --bg-dark:       var(--blue-deep);
  --fg:            var(--ink);
  --fg-muted:      var(--ink-soft);
  --fg-on-dark:    var(--paper);
  --accent:        var(--blue);
  --accent-warm:   var(--yellow);
  --hairline:      color-mix(in srgb, var(--ink) 12%, transparent);
  --hairline-dark: color-mix(in srgb, var(--paper) 22%, transparent);

  /* ---------- TIPOGRAFIA ---------- */
  --font-display:"Bricolage","Segoe UI",system-ui,Arial,sans-serif; /* títulos */
  --font-sans:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;  /* corpo/UI */
  --font-mincho:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",Cambria,Georgia,serif; /* citação, kanji */
  --font-mono:"Cascadia Code",Consolas,ui-monospace,monospace;      /* rótulos, romaji, dados */

  /* escala tipográfica (clamp fluido) */
  --t-display:clamp(32px,5.4vw,60px);  /* H1 — tom de conversa, não grito */
  --t-h2:clamp(26px,3.6vw,42px);
  --t-h3:clamp(20px,2.4vw,26px);
  --t-lead:clamp(16px,1.9vw,19px);
  --t-body:16.5px;
  --t-small:13.5px;
  --t-label:11px;   /* mono, tracking .2em, uppercase */
  --lh-tight:1.04; --lh-snug:1.2; --lh-body:1.6;
  --tracking-display:-.02em; --tracking-label:.2em;

  /* ---------- ESPAÇO / RESPIRO (ma) ---------- */
  --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;
  --gutter:clamp(20px,4vw,44px);
  --maxw:1120px;
  --section-y:clamp(56px,8vw,104px); /* respiro vertical entre seções */

  /* ---------- FORMAS ---------- */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  --stroke:1.5px;

  /* ---------- SOMBRA / ELEVAÇÃO ---------- */
  --sh-1:0 2px 8px -4px rgba(21,24,36,.18);
  --sh-2:0 24px 48px -30px rgba(21,24,36,.35);
  --sh-3:0 30px 60px -28px rgba(21,34,87,.45);

  /* ---------- DEGRADÊS ---------- */
  --grad-sky:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 46%,var(--paper) 100%);
  --grad-band:linear-gradient(160deg,var(--blue-deep) 0%,#0f1a44 100%);
  --grad-dawn:linear-gradient(150deg,var(--sun),#c85f2a);
  --grad-yami:linear-gradient(160deg,#151824 0%,#0e1533 100%);
  /* arte dos 7 movimentos */
  --mov-1:linear-gradient(150deg,#2B54CE,#152257);
  --mov-2:linear-gradient(150deg,#2E8C86,#173f52);
  --mov-3:linear-gradient(150deg,#EE9F3B,#c85f2a);
  --mov-4:linear-gradient(150deg,#6E97E8,#2B54CE);
  --mov-5:linear-gradient(150deg,#F4C13C,#d07a2a);
  --mov-6:linear-gradient(150deg,#3f7d6a,#1f4a5e);
  --mov-7:linear-gradient(150deg,#151824,#2B54CE);

  /* ---------- GRÃO (noise sutil) ---------- */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity:.05;       /* corpo: claro multiply .04–.06 · escuro screen .06–.08 */
  --grain-opacity-hero:.09;  /* hero/capa: mais textura, .08–.10 */
}

/* ============================================================
   UTILITÁRIOS / ELEMENTOS
   ============================================================ */

/* grão: aplique .grain em qualquer superfície */
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;background-image:var(--grain);
  background-size:160px 160px;opacity:var(--grain-opacity);pointer-events:none;
  mix-blend-mode:multiply;z-index:0}
.grain.on-dark::after{mix-blend-mode:screen;opacity:.07}
.grain>*{position:relative;z-index:1}

/* marca-texto: gesto-assinatura da marca. DUAS versões, uma por fundo.
   CLARO  -> .hl        : faixa amarela na base, texto fica na cor da tinta (escura).
   ESCURO -> .hl--dark  : bloco amarelo CHEIO + texto na tinta, legível sobre escuro.
   REGRA DURA: nunca usar .hl (faixa) sobre fundo escuro — o topo das letras cai no
   escuro e some (bug visto na v3). Sobre escuro é SEMPRE .hl--dark. */
.hl{background:linear-gradient(var(--yellow),var(--yellow));background-size:100% 40%;
  background-position:0 84%;background-repeat:no-repeat;padding:0 .06em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hl--dark{background:var(--yellow);color:var(--ink);padding:.04em .18em;border-radius:3px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* rótulo mono (kicker/eyebrow) */
.label{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--ink-soft)}

/* botões */
.btn{font-family:var(--font-display);font-weight:700;font-size:15px;border-radius:var(--r-sm);
  padding:14px 24px;text-decoration:none;display:inline-block;transition:.15s;border:var(--stroke) solid transparent;cursor:pointer}
.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-deep)}
.btn--ghost{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 26%,transparent)}
.btn--ghost:hover{border-color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--blue-deep);outline-offset:3px}

/* HANKO — o selo da marca é o carimbo clássico 翻訳不能 (assets/hanko.png,
   vermelho beni; hanko-white.png p/ fundo escuro; hanko-black.png p/ 1 cor).
   NUNCA usar o kanji de fome (餓) como hanko. Aplique como <img class="seal">. */
.seal{height:76px;width:auto;display:inline-block}
.seal--sm{height:56px}.seal--lg{height:110px}

/* blob orgânico (kasumi/névoa) — use como massa de cor de fundo */
.blob{border-radius:42% 58% 63% 37% / 45% 42% 58% 55%}

/* card informativo */
.card{background:var(--bg-panel);border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:26px 28px;box-shadow:var(--sh-2)}