/* Trycia Santos — Design Tokens v2
   Marca pessoal · posicionamento digital & infoprodutos de criação de conteúdo
   Base clara e quente (v1) + camada de conversão + voz manuscrita */

:root {
  /* ---- Cor: fundação (herdada da v1) ---- */
  --ty-grafite:     #3C3934; /* texto/títulos — nunca #000 */
  --ty-greige:      #EBE8E2; /* fundo base */
  --ty-paper:       #F7F4EE; /* superfície elevada (cards, caixas) */
  --ty-areia:       #DAD4C9; /* faixas, divisores */
  --ty-camel:       #D8BFA3; /* acento editorial calmo (~10%) */
  --ty-nude-claro:  #EADBC6; /* caixas de preço/bônus */
  --ty-taupe:       #8C8478; /* legendas grandes / decorativo (3:1) */

  /* ---- Cor: camada de conversão (nova na v2) ---- */
  --ty-terracota:        #A9502F; /* CTA, preço promo, ação — texto branco (5.4:1) */
  --ty-terracota-escuro: #8A3F24; /* hover; terracota como texto sobre claro */
  --ty-cacau:            #26211C; /* seções escuras, capas de módulo (greige 13:1) */

  /* ---- Tipografia ---- */
  --ty-font-display: 'League Spartan', 'Arial Black', sans-serif; /* títulos, CAIXA-ALTA */
  --ty-font-body:    'Montserrat', Helvetica, Arial, sans-serif;  /* corpo, UI */
  --ty-font-hand:    'Caveat', 'Comic Sans MS', cursive;          /* anotações/stickers */

  --ty-hero:    clamp(40px, 7vw, 88px);
  --ty-h2:      clamp(26px, 4vw, 40px);
  --ty-h3:      20px;
  --ty-body:    17px;
  --ty-caption: 13px;

  /* ---- Forma ---- */
  --ty-radius-sm: 8px;
  --ty-radius-md: 14px;
  --ty-radius-lg: 22px;
  --ty-pill: 999px;
  --ty-shadow-soft:    0 10px 30px rgba(60,57,52,.10);
  --ty-shadow-sticker: 0 4px 14px rgba(60,57,52,.16);
}

/* Bases prontas */
.ty-base        { background: var(--ty-greige); color: var(--ty-grafite); font-family: var(--ty-font-body); font-size: var(--ty-body); line-height: 1.55; }
.ty-dark        { background: var(--ty-cacau);  color: var(--ty-greige); }
.ty-display     { font-family: var(--ty-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.04; }
.ty-label       { font-family: var(--ty-font-body); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; }
.ty-hand        { font-family: var(--ty-font-hand); font-weight: 600; }

/* CTA */
.ty-btn         { display:inline-block; background: var(--ty-terracota); color:#fff; font: 700 16px/1 var(--ty-font-body); padding: 18px 34px; border-radius: var(--ty-radius-md); border:0; cursor:pointer; box-shadow: var(--ty-shadow-soft); }
.ty-btn:hover   { background: var(--ty-terracota-escuro); }
.ty-btn--ghost  { background: transparent; color: var(--ty-grafite); box-shadow:none; border: 2px solid var(--ty-grafite); }

/* Sticker (assinatura gráfica da marca) */
.ty-sticker     { display:inline-block; background: var(--ty-paper); color: var(--ty-grafite); border: 2px solid var(--ty-grafite); border-radius: var(--ty-pill); padding: 8px 18px; font-family: var(--ty-font-hand); font-size: 24px; box-shadow: var(--ty-shadow-sticker); transform: rotate(-3deg); }

/* Marcador de destaque (grifo camel) */
.ty-mark        { background: linear-gradient(transparent 55%, var(--ty-camel) 55%, var(--ty-camel) 92%, transparent 92%); }