/* ============================================================
   IMM0526 · Tokens CSS · v2.0
   Imersão Mão na Massa · 1ª Edição (16 de maio de 2026)
   Direção · vibrante cozinha-mundial folk-art brasileira
   Fonte canônica · campanhas/imm0526/concepcao/kv.md
   ============================================================ */

/* === GOOGLE FONTS · 4 famílias usadas no KV v2.0 ============= */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Bevan&family=Montserrat:wght@400;500;600;700;800&family=DM+Serif+Display:ital,wght@0,400;0,700;1,400&display=swap');

:root {

  /* ========================================================
     PALETA · 5 cores de design saturadas
     ======================================================== */

  /* Cobalto · background dominante (40%) */
  --imm-cobalto:        #1a3a52;
  --imm-cobalto-deep:   #0d2438;
  --imm-cobalto-mid:    #2d5470;

  /* Trigo · cor do nome, marquee, blocos de destaque (22%) */
  --imm-trigo:          #f4c430;
  --imm-trigo-deep:     #c8930a;
  --imm-trigo-light:    #fff48a;

  /* Coral · CTA, sombras dramáticas, ornamentos vermelhos (11%) */
  --imm-coral:          #e63946;
  --imm-coral-deep:     #b22b35;
  --imm-coral-light:    #ff5448;

  /* Verde · price pill, ornamentos verdes, secundário (9%) */
  --imm-verde:          #2a8c6a;
  --imm-verde-deep:     #155a3e;
  --imm-verde-light:    #4cb98a;

  /* Papel · background claro alternativo, moldura de foto (18%) */
  --imm-papel:          #f4ecd8;
  --imm-papel-warm:     #ebe3c8;

  /* Referência fotográfica (NÃO é cor de design) */
  --imm-foto-madeira-ref: #c89970; /* validador da bancada na curadoria de fotos */


  /* ========================================================
     TIPOGRAFIA · 4 fontes com papéis claros
     ======================================================== */

  --imm-f-display:  'Alfa Slab One', Georgia, serif;       /* nome do evento, posters */
  --imm-f-eyebrow:  'Bevan', Georgia, serif;               /* eyebrows, CTA, marquee */
  --imm-f-headline: 'DM Serif Display', Georgia, serif;    /* H1, citações */
  --imm-f-body:     'Montserrat', system-ui, sans-serif;   /* body, UI, labels */


  /* ========================================================
     ESPAÇAMENTO · escala fixa
     ======================================================== */

  --imm-sp-1:  4px;
  --imm-sp-2:  8px;
  --imm-sp-3:  12px;
  --imm-sp-4:  16px;
  --imm-sp-5:  24px;
  --imm-sp-6:  32px;
  --imm-sp-7:  48px;
  --imm-sp-8:  64px;
  --imm-sp-9:  96px;


  /* ========================================================
     RAIO DE BORDA
     ======================================================== */

  --imm-r-sm:    4px;
  --imm-r-md:    8px;
  --imm-r-lg:    18px;
  --imm-r-pill:  50px;


  /* ========================================================
     SOMBRAS · estilo cartaz vintage
     ======================================================== */

  /* Sombra sólida coral · cartão do nome amarelo */
  --imm-sh-card-coral:  8px 8px 0 var(--imm-coral);

  /* Sombra sólida amarela · moldura da foto */
  --imm-sh-card-trigo:  8px 8px 0 var(--imm-trigo);

  /* Sombra sólida cobalto · CTA */
  --imm-sh-cta-block:   6px 6px 0 var(--imm-cobalto);

  /* Sombra colorida soft · halo do CTA */
  --imm-sh-cta-coral:   0 8px 24px rgba(230, 57, 70, .4);

  /* Sombra cobalto soft · selo amarelo */
  --imm-sh-soft:        0 8px 24px rgba(26, 58, 82, .3);

  /* Sombra escura para foto */
  --imm-sh-photo:       0 14px 40px rgba(0, 0, 0, .45);


  /* ========================================================
     INCLINAÇÃO · peças vivas vs cerimoniais
     ======================================================== */

  --imm-rot-card-l:    -2deg;  /* cartão do nome inclina à esquerda */
  --imm-rot-card-r:     2deg;  /* moldura da foto inclina à direita */
  --imm-rot-selo:       -2deg; /* selo overlay 1 */
  --imm-rot-selo-alt:    1deg; /* selo overlay 2 (alternar) */
  --imm-rot-cerimonial:  0deg; /* peças cerimoniais · capa de PDF, certificado */


  /* ========================================================
     ANIMAÇÃO
     ======================================================== */

  --imm-t-fast:     .15s;
  --imm-t-mid:      .35s;
  --imm-t-marquee:  22s;


  /* ========================================================
     LETTERSPACING · padrões da casa
     ======================================================== */

  --imm-tracking-tight:  -.005em;  /* H1, headlines apertadas */
  --imm-tracking-normal:  .01em;   /* wordmark slab caps */
  --imm-tracking-eyebrow: .12em;   /* eyebrows pequenos */
  --imm-tracking-cta:     .14em;   /* CTA caps */
  --imm-tracking-marquee: .18em;   /* marquee caps */
  --imm-tracking-role:    .35em;   /* role do selo Andressa */


  /* ========================================================
     ALTURA DE LINHA
     ======================================================== */

  --imm-lh-tight:  .9;    /* slab caps */
  --imm-lh-h1:     1.05;  /* headline italic */
  --imm-lh-body:   1.55;  /* body, subhead */


  /* ========================================================
     DIMENSÕES FIXAS
     ======================================================== */

  --imm-border-textil-h:  28px;  /* altura da borda têxtil decorativa */
  --imm-photo-frame-pad:  10px;  /* padding interno da moldura branca */
}


/* ============================================================
   RESET MÍNIMO · garante font default em todo lugar
   ============================================================ */

html, body {
  font-family: var(--imm-f-body);
}


/* ============================================================
   PADRÃO TÊXTIL DECORATIVO · borda superior do hero
   ============================================================ */

.imm-border-textil {
  height: var(--imm-border-textil-h);
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--imm-coral) 0 22px,
      var(--imm-cobalto) 22px 26px,
      var(--imm-trigo) 26px 48px,
      var(--imm-cobalto) 48px 52px,
      var(--imm-coral) 52px 70px,
      var(--imm-cobalto) 70px 74px,
      var(--imm-verde) 74px 96px,
      var(--imm-cobalto) 96px 100px
    );
  border-bottom: 4px solid var(--imm-coral);
}


/* ============================================================
   ANIMAÇÃO MARQUEE · loop infinito
   ============================================================ */

@keyframes imm-marquee-anim {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ============================================================
   VARIANTES DE APLICAÇÃO · cerimonial
   ============================================================ */

.imm-cerimonial {
  /* Aplicar essa classe no container raiz da peça cerimonial.
     Ex: capa de PDF, certificado, slide de aula, agradecimento. */
}
.imm-cerimonial .imm-card-rotaciona,
.imm-cerimonial .imm-photo-rotaciona,
.imm-cerimonial .imm-selo-rotaciona {
  transform: rotate(var(--imm-rot-cerimonial)) !important;
}