/* ==========================================================================
   PROTOCOLO TIKTOK MILIONÁRIO — Design Tokens
   Fonte: Brandbook v3.0 · Lançamento 01
   Toda peça e toda página consomem daqui. Não escreva hex solto no componente.
   ========================================================================== */

:root{

  /* ---------- COR · base (68% + 20% da peça) ------------------------------ */
  --ptm-off-white:        #EFE9DD;  /* fundo principal de TUDO — 68% */
  --ptm-areia:            #F6F2EA;  /* segundo plano, cartões, separação — 20% */
  --ptm-areia-escura:     #E3DACA;  /* borda de cartão, divisor sobre areia */
  --ptm-branco:           #FFFFFF;  /* só documento/contrato/tela branca */

  /* ---------- COR · ouro (8% da peça) ------------------------------------- */
  --ptm-ouro-de:          #DB6838;  /* início do gradiente (terracota) */
  --ptm-ouro-ate:         #FABC3E;  /* fim do gradiente (ouro) */
  --ptm-ouro-profundo:    #8A5A1E;  /* ouro em TEXTO pequeno — o gradiente não passa contraste */
  --ptm-grad-ouro:        linear-gradient(90deg, #DB6838, #FABC3E);
  --ptm-grad-ouro-135:    linear-gradient(135deg, #DB6838, #FABC3E);

  /* ---------- COR · plataforma (teto de 4% da peça) ----------------------- */
  --ptm-ciano:            #00F2EA;  /* só filete, ícone, selo. NUNCA leva texto em cima */
  --ptm-magenta:          #FF004F;  /* alerta, virada de lote, contador. Nunca em bloco grande */
  --ptm-violeta:          #8E15B8;  /* ponte do gradiente. Não usa sozinho */
  --ptm-grad-plataforma:  linear-gradient(90deg, #00F2EA, #8E15B8, #FF004F);

  /* ---------- COR · tinta ------------------------------------------------- */
  /* Preto é tinta de texto. Nunca fundo de peça. Fora da conta de proporção. */
  --ptm-preto:            #14110F;
  --ptm-texto:            #14110F;
  --ptm-texto-2:          rgba(20,17,15,.68);  /* apoio, parágrafo secundário */
  --ptm-texto-3:          rgba(20,17,15,.45);  /* rótulo, meta, pergunta do feed */
  --ptm-linha:            rgba(20,17,15,.14);  /* divisor padrão */
  --ptm-linha-forte:      rgba(20,17,15,.24);
  --ptm-veu:              rgba(20,17,15,.06);  /* hover, zebra, chip neutro */

  /* ---------- TIPOGRAFIA · famílias --------------------------------------- */
  --ptm-font-titulo:  'Archivo', system-ui, sans-serif;           /* 700 / 800 */
  --ptm-font-texto:   'Plus Jakarta Sans', system-ui, sans-serif; /* 400 / 500 / 600 / 700 */
  --ptm-font-serif:   'Instrument Serif', Georgia, serif;         /* 400 apenas — só itálico em headline */

  /* ---------- ESCALA DE TIPO · 8 degraus, conforme DESIGN.md --------------
     Fluida. Nenhum tamanho de fonte é digitado fora daqui. ---------------- */
  --t-display: clamp(32px, 3.35vw, 50px);
  --t-h2:      clamp(28px, 4.2vw, 44px);
  --t-h3:      clamp(20px, 1.9vw, 26px);
  --t-num:     clamp(30px, 3.4vw, 44px);
  --t-preco:   clamp(64px, 7.6vw, 104px);  /* só o preço da oferta: é o
     número que fecha a página e precisa de um degrau acima do de estatística */
  --t-sub:     clamp(17px, 1.3vw, 19px);
  --t-corpo:   16px;
  --t-apoio:   14px;
  --t-rotulo:  11px;

  /* ---------- TIPOGRAFIA · tracking e entrelinha -------------------------- */
  --ptm-track-display: -.035em;  /* −3,5% no display */
  --ptm-track-titulo:  -.02em;   /* −2% no título */
  --ptm-track-rotulo:  .2em;     /* rótulo caixa alta — máx. 5 palavras */
  --ptm-track-serif:   0;        /* a serifa zera o tracking negativo do Archivo */
  --ptm-lh-display: 1.02;
  --ptm-lh-titulo:  1.12;
  --ptm-lh-sub:     1.45;
  --ptm-lh-texto:   1.65;        /* 1,6 a 1,7 */
  --ptm-serif-escala: 1.07em;    /* a serifa é mais estreita: sobe 7% para igualar altura visual */

  /* ---------- ESPAÇO (base 8) --------------------------------------------- */
  --ptm-e-1:4px;   --ptm-e-2:8px;   --ptm-e-3:12px;  --ptm-e-4:16px;
  --ptm-e-2b:10px; --ptm-e-4b:20px;   /* degraus finos de lista */
  --ptm-e-5:24px;  --ptm-e-6:32px;  --ptm-e-7:40px;  --ptm-e-8:56px;
  --ptm-e-9:72px;  --ptm-e-10:88px; --ptm-e-11:112px; --ptm-e-12:144px;

  /* ---------- FORMA -------------------------------------------------------- */
  --ptm-raio-pilula: 999px;  /* selo, botão, rótulo */
  --ptm-raio-cartao: 20px;
  --ptm-raio-campo:  12px;
  --ptm-raio-foto:   16px;

  --ptm-borda-moldura: 2px;  /* moldura fina dourada — story e print de faturamento */
  --ptm-filete: 6px;         /* filete de gradiente no topo da peça */

  /* ---------- ELEVAÇÃO ----------------------------------------------------- */
  --ptm-sombra-cartao: 0 1px 3px rgba(20,17,15,.04), 0 12px 32px rgba(20,17,15,.06);
  --ptm-sombra-alta:   0 2px 6px rgba(20,17,15,.05), 0 28px 64px rgba(20,17,15,.10);
  --ptm-sombra-botao:  0 2px 10px rgba(219,104,56,.28);

  /* ---------- LOGO ---------------------------------------------------------- */
  --ptm-logo-min:     180px; /* largura mínima em tela. Abaixo disso, use o símbolo */
  --ptm-logo-respiro: .22;   /* respiro mínimo = altura da faixa "Protocolo" ≈ 22% da largura */
  --ptm-simbolo-min-colorido: 40px; /* abaixo de 40px o traço fecha: use mono */
}

/* ==========================================================================
   PRIMITIVAS
   ========================================================================== */

/* Palavra em serifa itálica dentro da headline — UMA por peça.
   Substantivo, número ou adjetivo. Nunca preposição, nunca artigo.
   Mesma cor do texto. Nunca em caixa alta, nunca em romano, nunca em bold. */
.ptm-serif{
  font-family: var(--ptm-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--ptm-serif-escala);
  letter-spacing: var(--ptm-track-serif);
  padding-right: .04em; /* o itálico invade a letra seguinte */
}

/* Filete de gradiente da plataforma — topo da peça, 6px. */
.ptm-filete{ height: var(--ptm-filete); background: var(--ptm-grad-plataforma); }

/* Hachura dourada — vem do traço do cabelo no retrato.
   Faixa fina, canto de peça ou divisor. NUNCA como fundo inteiro. */
.ptm-hachura{
  background-image: repeating-linear-gradient(
    -45deg, var(--ptm-ouro-profundo) 0 1px, transparent 1px 7px
  );
  opacity: .5;
}

/* Moldura fina dourada — 2px, story e print de faturamento. */
.ptm-moldura{
  border: var(--ptm-borda-moldura) solid transparent;
  background:
    linear-gradient(var(--ptm-areia), var(--ptm-areia)) padding-box,
    var(--ptm-grad-ouro-135) border-box;
}