/* =============================================================
   DOJO TRADICIONAL — TOKENS
   Sistema visual do Placar de Kumitê, preparado para reuso no site.
   Documentação e receitas de componente: ./SISTEMA-VISUAL.md

   Uso:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Old+Mincho:wght@400;600;700&display=swap">
     <link rel="stylesheet" href="tokens.css">
   ============================================================= */

:root {

  /* ---------- Cor: primitivas ---------- */
  --washi: #f3ecdd;        /* papel — fundo padrão */
  --sumi: #1b1714;         /* tinta — texto padrão */
  --aka: #b0301f;          /* vermelho — acento, lado AKA */
  --aka-escuro: #8d2617;   /* aka em hover/pressionado */
  --ao: #1f3a63;           /* azul — lado AO, acento frio */
  --noite: #14100e;        /* fundo escuro (telas de destaque) */
  --aka-claro: #d4503a;    /* vermelho sobre fundo escuro — só texto grande */

  /* ---------- Cor: papéis semânticos (tema claro) ---------- */
  --fundo: var(--washi);
  --texto: var(--sumi);
  --texto-suave: rgba(27, 23, 20, 0.68);
  --texto-fraco: rgba(27, 23, 20, 0.55);
  --acento: var(--aka);
  --superficie: var(--washi);   /* cartões e painéis sobre o fundo */
  --contraste-bg: var(--sumi);  /* botão primário, estado ativo */
  --contraste-fg: var(--washi);

  /* réguas e divisores */
  --regua-fraca: rgba(27, 23, 20, 0.22);
  --regua: rgba(27, 23, 20, 0.28);
  --regua-forte: rgba(27, 23, 20, 0.45);
  --realce-hover: rgba(27, 23, 20, 0.08);

  /* véu de modal */
  --veu: rgba(20, 16, 13, 0.72);

  /* ---------- Tipografia ---------- */
  --serif: 'Zen Old Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', Georgia, 'Times New Roman', serif;
  --sans: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Helvetica Neue', Arial, sans-serif;

  /* escala — display em serif, resto em sans */
  --txt-display: 64px;   /* números e nomes de destaque (serif) */
  --txt-h1: 40px;
  --txt-h2: 28px;
  --txt-h3: 20px;
  --txt-corpo: 16px;
  --txt-rotulo: 14px;
  --txt-micro: 12px;

  /* letter-spacing — a marca do sistema está no espaçamento largo */
  --ls-display: 0.16em;  /* títulos grandes em caixa alta */
  --ls-titulo: 0.22em;   /* cabeçalho de painel */
  --ls-secao: 0.28em;    /* rótulo de seção (h3 pequeno) */
  --ls-micro: 0.3em;     /* legendas e badges */
  --ls-rotulo: 0.14em;   /* botões e rótulos de linha */
  --ls-vertical: 0.42em; /* texto em writing-mode vertical */

  /* ---------- Forma ---------- */
  --canto: 0;                    /* NUNCA arredondar. É a regra do sistema. */
  --borda: 1px solid var(--sumi);
  --borda-forte: 2px solid var(--sumi);

  /* sombra sólida deslocada — sem blur, sempre para baixo/direita */
  --sombra-1: 4px 4px 0 rgba(27, 23, 20, 0.28);
  --sombra-2: 7px 7px 0 rgba(27, 23, 20, 0.38);
  --sombra-3: 10px 10px 0 rgba(9, 7, 6, 0.5);

  /* ---------- Espaçamento ---------- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 14px;
  --esp-4: 22px;
  --esp-5: 26px;   /* medianiz padrão de painel */
  --esp-6: 34px;
  --esp-7: 48px;
  --esp-8: 64px;

  /* alturas de controle */
  --alt-botao: 48px;
  --alt-linha: 58px;      /* linha de opção clicável */
  --alt-cabecalho: 78px;  /* cabeçalho de painel */

  /* ---------- Movimento ---------- */
  --transicao: .15s;

  /* ---------- Textura de papel ---------- */
  --textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.13'/%3E%3C/svg%3E");
  --textura-tam: 220px 220px;
}

/* =============================================================
   VARIANTE ESCURA — seções de destaque (herói, resultado, rodapé)
   Aplique em qualquer contêiner: <section class="noite">
   Não é um "dark mode" do site inteiro; é um bloco de ênfase.
   ============================================================= */
.noite {
  --fundo: var(--noite);
  --texto: var(--washi);
  --texto-suave: rgba(243, 236, 221, 0.6);
  --texto-fraco: rgba(243, 236, 221, 0.45);
  --acento: var(--aka-claro);
  --superficie: var(--noite);
  --contraste-bg: var(--washi);
  --contraste-fg: var(--sumi);

  --regua-fraca: rgba(243, 236, 221, 0.22);
  --regua: rgba(243, 236, 221, 0.3);
  --regua-forte: rgba(243, 236, 221, 0.5);
  --realce-hover: rgba(243, 236, 221, 0.1);

  --borda: 1px solid var(--washi);
  --borda-forte: 2px solid var(--washi);
  --sombra-1: 4px 4px 0 rgba(9, 7, 6, 0.45);
  --sombra-2: 7px 7px 0 rgba(9, 7, 6, 0.45);
  --sombra-3: 10px 10px 0 rgba(9, 7, 6, 0.5);

  background-color: var(--fundo);
  color: var(--texto);
}

/* =============================================================
   MECANISMO — textura de papel
   O ruído é o que impede o washi de parecer "bege chapado".
   Use em fundos de página, painéis e seções grandes.
   ============================================================= */
.washi {
  background-color: var(--fundo);
  background-image: var(--textura);
  background-size: var(--textura-tam);
}

/* Base sugerida para a página do site */
.dojo-base {
  margin: 0;
  background-color: var(--washi);
  background-image: var(--textura);
  background-size: var(--textura-tam);
  color: var(--sumi);
  font-family: var(--sans);
  font-size: var(--txt-corpo);
  line-height: 1.6;
}