/* ============================================================
   CLEBER PAIVA — SISTEMA VISUAL · v3 (ADR-024)
   Fonte única de máquina. Site, blog, portfólio, produto, deck e
   post importam daqui e NÃO redefinem cor, fonte ou espaçamento.
   Manual: holding/01-identidade/marca/manual-de-marca.html
   ============================================================ */

:root {
  /* ---- FUNDOS · claro é o padrão ---- */
  --cp-bg:        #F4F3EF;  /* branco gelo — o fundo padrão de tudo        */
  --cp-bg-alt:    #E8E8E4;  /* cinza claro — alternativa                   */
  --cp-bg-dark:   #0A0A0B;  /* preto — exceção: vídeo, capa, sala escura   */
  --cp-sup:       #FFFFFF;  /* card, painel, superfície sobre o fundo      */
  --cp-sup-2:     #EDEBE5;  /* segunda camada, hover                       */
  --cp-lin:       #DCD9D1;  /* borda, divisória                            */
  --cp-lin-2:     #C4C0B6;  /* borda forte, moldura de peça                */

  /* ---- TEXTO · hierarquia por tom, nunca por opacidade ---- */
  --cp-ink:       #14161A;  /* texto e moldura do símbolo    · 15,3:1      */
  --cp-ink-2:     #55534D;  /* texto secundário              ·  7,3:1      */
  --cp-ink-3:     #8A877F;  /* rótulo, metadado              ·  4,0:1      */

  /* ---- A COR · um ultramarino, o mesmo em todo fundo ---- */
  --cp-azul:      #2B4CFF;  /* 5,3:1 no claro · 3,4:1 no preto             */
  --cp-azul-tela: #5C7CFF;  /* SÓ para texto pequeno sobre o preto         */

  /* ---- TIPOGRAFIA ---- */
  --cp-jost: "Jost", system-ui, sans-serif;                         /* marca e títulos  */
  --cp-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif; /* texto corrido    */
  --cp-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;    /* dado e rótulo    */

  --cp-tracking-nome:   .34em;  /* CLEBER PAIVA, sempre                    */
  --cp-tracking-rotulo: .20em;  /* rótulos em mono, caixa alta             */
  --cp-tracking-titulo: .02em;  /* títulos em Jost                         */

  /* ---- ESCALA ---- */
  --cp-t-marca:  clamp(19px, 3.2vw, 38px);
  --cp-t-h1:     clamp(30px, 5.4vw, 62px);
  --cp-t-h2:     clamp(24px, 3.4vw, 38px);
  --cp-t-lead:   clamp(16px, 1.7vw, 19px);
  --cp-t-body:   16.5px;
  --cp-t-micro:  13.5px;
  --cp-t-rotulo: 11px;

  /* ---- RITMO ---- */
  --cp-s1:4px; --cp-s2:8px; --cp-s3:12px; --cp-s4:16px;
  --cp-s5:24px; --cp-s6:32px; --cp-s7:48px; --cp-s8:72px; --cp-s9:112px;
  --cp-measure: 64ch;   /* largura máxima de leitura                       */
  --cp-radius: 0;       /* nada arredondado. nunca.                        */
  --cp-margem-peca: 8%; /* margem interna de post, capa e slide            */
}

/* ---- TEMAS ALTERNATIVOS ----------------------------------- */
:root[data-tema="cinza"] {
  --cp-bg:#E8E8E4; --cp-sup:#F2F1ED; --cp-sup-2:#DEDCD6;
  --cp-lin:#CFCCC4; --cp-lin-2:#B4B1A8;
}
:root[data-tema="escuro"] {
  --cp-bg:#0A0A0B; --cp-sup:#121318; --cp-sup-2:#191B21;
  --cp-lin:#23252C; --cp-lin-2:#31343D;
  --cp-ink:#F0EEE9; --cp-ink-2:#A5A29B; --cp-ink-3:#706E68;
}

/* ---- MARCA ------------------------------------------------- */
/* O símbolo usa currentColor na moldura e nas letras: acompanha
   o tema sozinho. Só o azul do P e do trecho aceso é fixo.      */
.cp-simbolo { display:block; color: var(--cp-ink); }

/* Assinatura escrita: CLEBER em tinta, PAIVA em azul.           */
.cp-nome { font-family:var(--cp-jost); font-weight:400;
  letter-spacing:var(--cp-tracking-nome); line-height:1; white-space:nowrap; }
.cp-nome i { color:var(--cp-azul); font-style:normal; }

/* Cursor: SÓ quando NÃO há símbolo na peça. Proporção 3:4.      */
.cp-cursor { display:inline-block; width:.71em; height:.95em;
  background:var(--cp-azul); margin-left:.08em; vertical-align:-.1em;
  animation: cp-blink 1.1s steps(1) infinite; }
@keyframes cp-blink { 50% { opacity:0 } }
@media (prefers-reduced-motion: reduce) { .cp-cursor { animation:none } }

/* Tagline opcional, sempre em mono caixa alta.                  */
.cp-tag { font-family:var(--cp-mono); letter-spacing:.30em; color:var(--cp-ink-2); }
.cp-tag i { color:var(--cp-azul); font-style:normal; }

/* ---- LINK -------------------------------------------------- */
/* O azul marca o traço, não a letra: em corpo pequeno ele não
   sustenta contraste suficiente sozinho.                        */
a { color:var(--cp-ink); text-decoration:underline;
    text-decoration-color:var(--cp-azul); text-underline-offset:4px;
    text-decoration-thickness:1px; }
a:hover { color:var(--cp-azul); }
:focus-visible { outline:2px solid var(--cp-azul); outline-offset:3px; }

/* ---- ÍCONES ------------------------------------------------ */
/* Grade 24×24, traço 1.4, sem preenchimento, herdando a cor.    */
.cp-icone { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.4; }