/* Componentes e papéis da marca Kahuê Vidal. Escrito pela skill sistema-criativo (Fase 4), editável.
   Os valores vêm SEMPRE dos tokens (marca/tokens.css). Nada de cor solta aqui. */

/* 1. Papéis: o que cada cor e fonte faz nas peças. Os modelos de peça usam só estes nomes. */
:root {
  --fundo: var(--nevoa);                    /* fundo claro padrão (o do post "necessário em 2026") */
  --fundo-escuro: var(--grafite);
  --fundo-apoio: var(--caqui);              /* fundo quente para alternar páginas */
  --texto: var(--grafite);                  /* 14,7 sobre Névoa, 9,5 sobre Cáqui */
  --texto-sobre-escuro: var(--nevoa);       /* 14,7 sobre Grafite */
  --texto-secundario: var(--chumbo);        /* 7,3 sobre Névoa, 4,7 sobre Cáqui */
  --texto-secundario-sobre-escuro: var(--pedra); /* 7,9 sobre Grafite */
  --destaque: var(--laranja);               /* 6,2 sobre Grafite: cor de destaque no escuro */
  --destaque-sobre-claro: var(--queimado);  /* 6,3 sobre Névoa: só em texto grande */
  --linha: var(--pedra);                    /* grade e hachura no claro */
  --linha-sobre-escuro: var(--chumbo);
  --margem-peca: 96px;
}

/* Rótulo (label) é sempre caixa alta. Nunca vai empilhado acima do título (regra "Rótulo não é eyebrow"). */
.tipo-label { text-transform: uppercase; }

/* Destaque de palavra = tarja, não troca de cor (regra "Uma tarja por título").
   Seletor mais forte que o .destaque de pecas.css, que pinta a letra. */
body .destaque.destaque, .tarja-destaque {
  font-style: normal;
  background: var(--fundo-escuro);
  color: var(--texto-sobre-escuro);
  border-radius: var(--raio-tarja);
  /* inline-block: a tarja tem a altura da letra, não da linha (senão cobre a linha de cima). */
  display: inline-block;
  line-height: .95;
  padding: .02em .14em .04em;
  vertical-align: baseline;
}
body .pagina--escura .destaque.destaque, body .escura .destaque.destaque,
.pagina--escura .tarja-destaque, .escura .tarja-destaque {
  background: var(--fundo);
  color: var(--texto);
}

/* Botão principal no fundo escuro: inverte, senão some (Grafite sobre Grafite). */
.pagina--escura .button-primary, .escura .button-primary {
  background: var(--fundo);
  color: var(--texto);
}
.pagina--escura .button-secondary, .escura .button-secondary {
  color: var(--texto-sobre-escuro);
  border-color: var(--texto-sobre-escuro);
}
.button-primary, .button-secondary, .chip { text-transform: uppercase; letter-spacing: .06em; }

/* 2. Componentes da marca (além dos do DESIGN.md). Cada um tem um exemplo em marca/componentes/NOME.html */

/* 2.1 Grade de fundo: pares de linhas verticais finas. Vai na própria página: <section class="pagina ... com-grade"> */
.com-grade { position: relative; isolation: isolate; }
.com-grade::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    transparent 0 222px, var(--linha) 222px 223px,
    transparent 223px 245px, var(--linha) 245px 246px);
  opacity: .22; /* textura, não divisão: tem que sumir quando você não procura */
}
.pagina--escura.com-grade::before, .escura.com-grade::before { background-image: repeating-linear-gradient(90deg,
    transparent 0 222px, var(--linha-sobre-escuro) 222px 223px,
    transparent 223px 245px, var(--linha-sobre-escuro) 245px 246px); opacity: .3; }

/* 2.1b Grão: ruído monocromático por cima da página inteira (fundo, imagem e texto), como impressão.
   Vai em toda página de peça (.pagina) e em quem tiver .com-grao. Para tirar numa página: .sem-grao */
.pagina::after, .com-grao::after {
  content: ""; position: absolute; inset: 0; z-index: 10; pointer-events: none;
  /* pontos escuros no fundo claro */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.8 0 0 0 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: .16;
}
.com-grao { position: relative; }
/* pontos claros no fundo escuro */
.pagina--escura::after, .escura.com-grao::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.8 0 0 0 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); opacity: .12; }
.pagina.sem-grao::after { display: none; }

/* 2.2 Faixa hachurada: moldura do topo e do pé. Pode levar uma tarja ou a assinatura no meio. */
.faixa-hachurada {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 48px; border: 1px solid var(--texto-secundario);
  background: repeating-linear-gradient(135deg, transparent 0 7px, var(--texto-secundario) 7px 8px);
}
.pagina--escura .faixa-hachurada, .escura .faixa-hachurada {
  border-color: var(--texto-secundario-sobre-escuro);
  background: repeating-linear-gradient(135deg, transparent 0 7px, var(--texto-secundario-sobre-escuro) 7px 8px);
}
.faixa-hachurada .faixa-tarja {
  background: var(--tela); color: var(--nevoa);
  font-family: var(--tipo-label-familia); font-weight: 500; font-size: 24px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 0 18px; height: 100%; display: flex; align-items: center; gap: 12px;
}

/* 2.3 Metadados nos cantos: textos pequenos em mono, nunca acima do título. */
.metadados {
  display: flex; justify-content: space-between; gap: 24px;
  font-family: var(--tipo-label-familia); font-weight: 500; font-size: 24px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--texto-secundario);
}
.pagina--escura .metadados, .escura .metadados { color: var(--texto-secundario-sobre-escuro); }

/* 2.4 Assinatura: foto redonda + nome. Sem foto, fica só o nome. A marca não tem logo. */
.assinatura {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--tipo-label-familia); font-weight: 500; font-size: 24px; line-height: 1.2;
}
.assinatura img { width: 56px; height: 56px; border-radius: 999px; object-fit: cover; }
.assinatura small { display: block; font-size: 24px; font-weight: 400; color: var(--texto-secundario); }
.pagina--escura .assinatura small, .escura .assinatura small { color: var(--texto-secundario-sobre-escuro); }
.faixa-hachurada .assinatura { font-size: 24px; }
.faixa-hachurada .assinatura img { width: 32px; height: 32px; }

/* 2.5 Objeto recortado ("imagem sólida"). Logo de ferramenta ganha borda branca de adesivo. */
.objeto { display: block; object-fit: contain; }
.adesivo {
  filter:
    drop-shadow(5px 0 0 var(--branco)) drop-shadow(-5px 0 0 var(--branco))
    drop-shadow(0 5px 0 var(--branco)) drop-shadow(0 -5px 0 var(--branco));
}
.fileira-objetos { display: flex; align-items: center; justify-content: space-between; gap: 32px; }

/* 2.6 Nó de framework: a peça básica dos frameworks de LinkedIn. */
.framework { display: grid; gap: 0; }
.no {
  display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 24px;
  background: var(--corpo); color: var(--grafite);
  border-radius: var(--raio-cartao); padding: 24px 32px;
}
.no .no-numero { font-family: var(--tipo-title-familia); font-size: 56px; line-height: 1; }
.no .no-nome { font-family: var(--tipo-body-familia); font-weight: 500; font-size: 30px; line-height: 1.2; }
.no .no-texto { grid-column: 2; font-family: var(--tipo-body-familia); font-size: 24px; line-height: 1.4; color: var(--chumbo); margin-top: -12px; }
.no--escuro { background: var(--tela); color: var(--nevoa); }
.no--escuro .no-texto { color: var(--pedra); }
.ligacao {
  justify-self: start; margin-left: 76px; width: 1px; height: 40px;
  background: var(--texto); position: relative;
}
.ligacao::after { content: ""; position: absolute; left: -6px; bottom: 0; border: 6px solid transparent; border-top: 8px solid var(--texto); border-bottom: 0; }
.pagina--escura .ligacao, .escura .ligacao { background: var(--texto-sobre-escuro); }
.pagina--escura .ligacao::after, .escura .ligacao::after { border-top-color: var(--texto-sobre-escuro); }

/* Story e vídeo vertical: o texto mínimo é 28 px (marca/regras.json). */
.pagina--story .metadados, .pagina--story .assinatura, .pagina--story .faixa-tarja { font-size: 28px; }
.pagina--story .assinatura img { width: 64px; height: 64px; }

/* Faixa, metadados e assinatura nunca encolhem quando a página lota (o flex da .pagina esmagava a faixa). */
.faixa-hachurada, .metadados, .assinatura, .pagina > .pe { flex-shrink: 0; }

/* 2.7 Visor: tela de máquina (LCD) para ano, número ou hora. Os dígitos são desenho (Geist Pixel), por isso data-deco.
   Sozinho: <div class="visor" data-deco><span class="visor-topo"><span>Rótulo</span><i class="visor-luz"></i></span><span class="visor-tela">1989</span></div>
   Como relógio: envolva em .relogio com .pulseira antes e depois. Desenho genérico: nunca escreva marca de terceiro no visor. */
.visor {
  display: inline-flex; flex-direction: column; gap: 14px;
  background: var(--tela); color: var(--pedra);
  border-radius: 40px; padding: 26px 34px 34px; position: relative;
}
.visor-topo {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-family: var(--tipo-label-familia); font-weight: 500; font-size: 24px;
  letter-spacing: .06em; text-transform: uppercase;
}
.visor-luz { width: 22px; height: 22px; border-radius: 999px; background: var(--laranja); display: block; } /* o acento vivo da peça */
.visor-tela {
  display: block; background: var(--caqui); color: var(--grafite);
  border-radius: 14px; padding: 18px 30px 8px;
  font-family: var(--tipo-display-familia); font-size: 140px; line-height: 1; letter-spacing: .02em;
  box-shadow: inset 0 0 0 3px var(--pedra);
}
.visor--pequeno { border-radius: 28px; padding: 18px 24px 24px; }
.visor--pequeno .visor-tela { font-size: 96px; padding: 12px 22px 4px; }
/* botões laterais do relógio */
.relogio .visor::before, .relogio .visor::after {
  content: ""; position: absolute; width: 12px; height: 44px; background: var(--argila); border-radius: 4px;
}
.relogio .visor::before { left: -12px; top: 38%; }
.relogio .visor::after { right: -12px; top: 30%; box-shadow: 0 90px 0 var(--argila); }
.relogio { display: inline-flex; flex-direction: column; align-items: center; }
.pulseira {
  width: 62%; height: 110px; background-color: var(--chumbo);
  background-image: repeating-linear-gradient(0deg, transparent 0 26px, var(--tela) 26px 29px);
}
.pulseira:first-child { border-radius: 18px 18px 0 0; }
.pulseira:last-child { border-radius: 0 0 18px 18px; }
/* no fundo escuro a caixa clareia um tom, senão some no Grafite */
.pagina--escura .visor, .escura .visor { background: var(--chumbo); }
.pagina--escura .pulseira, .escura .pulseira { background-color: var(--tela); background-image: repeating-linear-gradient(0deg, transparent 0 26px, var(--chumbo) 26px 29px); }
.pagina--escura .relogio .visor::before, .pagina--escura .relogio .visor::after { background: var(--pedra); }
.pagina--escura .relogio .visor::after { box-shadow: 0 90px 0 var(--pedra); }

/* 2.8 Acento da peça. Cada peça tem UM acento vivo (padrão: Laranja). Para trocar, ponha a classe no <body>:
   .acento-lilas, .acento-azul, .acento-verde, .acento-amarelo. Com .tarja-acento, a tarja do título também usa o acento
   (texto Grafite: 10,2 sobre Lilás). No fundo claro, acento claro (Lilás, Amarelo, Verde) ganha contorno Grafite de 2 px,
   senão some (Lilás sobre Névoa dá 1,45; sobre Cáqui, 1,08). */
:root { --acento: var(--laranja); --acento-contorno: none; }
.acento-lilas { --acento: var(--lilas); --acento-contorno: inset 0 0 0 2px var(--grafite); }
.acento-amarelo { --acento: var(--amarelo); --acento-contorno: inset 0 0 0 2px var(--grafite); }
.acento-verde { --acento: var(--verde); --acento-contorno: inset 0 0 0 2px var(--grafite); }
.acento-azul { --acento: var(--azul); }
.pagina--escura, .escura { --acento-contorno: none; }
.visor-luz { background: var(--acento); }
body.tarja-acento .destaque.destaque, body.tarja-acento .pagina--escura .destaque.destaque, .tarja-acento .tarja-destaque {
  background: var(--acento); color: var(--grafite); box-shadow: var(--acento-contorno);
}
/* marcador numerado do acento (bolinha com número), para chamadas em desenho e diagrama */
.marcador {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 999px; background: var(--acento); color: var(--grafite);
  box-shadow: inset 0 0 0 2px var(--grafite);
  font-family: var(--tipo-label-familia); font-weight: 500; font-size: 24px;
}