/* Indicações com a cara da DEVONT. Carregado depois do estilo.css (e do convite.css na tela do indicado):
   mantém o layout e a abertura do envelope e troca cor, tipografia e marca pela marca 2.0.
   Fonte: Agencia/Clientes/bomma/DEVONT/identidade-visual/ (tokens/core.json, foundations/, wordmark.md).
   - Paleta só da 2.0; branco puro fora (o branco da marca é #F4F4F4).
   - Host Grotesk na interface; ênfase em itálico serifado, uma por título (Ambroise sem licença web:
     cai em Georgia itálico, como o design system determina).
   - Âmbar só como destaque sobre escuro; terracota só como destaque sobre claro.
   - Marca pelos vetores oficiais, pintados por máscara (currentColor). */

:root {
  --d-escuro: #1F0702;     /* brown-950 */
  --d-marrom: #441001;     /* brown-900 */
  --d-terracota: #AD3D08;
  --d-ambar: #FD9C17;
  --d-bege: #F2EDDA;
  --d-branco: #F4F4F4;
  --d-creme: #FFF7CF;
  /* tons derivados (decisão de produto, como no design system): texto de apoio e bordas */
  --d-bege-apoio: #D2C7AF;   /* texto secundário sobre o escuro */
  --d-suave-claro: #5C463B;  /* texto secundário sobre o bege (AA) */
  --d-borda: #D3C8AD;        /* borda de campo sobre o bege */
  --d-dica: #8A7768;         /* texto de dica (placeholder) sobre o branco da marca */
  --d-env-fundo: #DCD0B4;    /* envelope: três tons do bege para dar volume ao papel */
  --d-env-frente-a: #EEE7D2;
  --d-env-frente-b: #E3D9BF;
  --d-env-aba-b: #E8DFC6;

  /* nomes usados pelo estilo.css e pelo convite.css */
  --cafe: var(--d-escuro);
  --marfim: var(--d-bege);
  --creme: var(--d-bege);
  --bronze: var(--d-terracota);
  --bronze-escuro: var(--d-marrom);
  --bronze-claro: var(--d-ambar);
  --linha: var(--d-borda);
  --texto-suave: var(--d-suave-claro);
  --erro: #9B1C31;           /* carmim, afastado da terracota */
  --fonte: "Host Grotesk", Inter, system-ui, sans-serif;
  --fonte-enfase: Georgia, "Times New Roman", serif;
}

body { font-family: var(--fonte); font-weight: 400; }
input, select, textarea, .botao, .pular { font-family: var(--fonte); }
.regua .num { font-family: var(--fonte); }

/* marca horizontal oficial (símbolo + wordmark), proporção 841,12 × 121,5 */
.marca {
  width: 194px; height: 28px; background: var(--d-bege);
  -webkit-mask: url(devont-marca-horizontal.svg) center / contain no-repeat;
  mask: url(devont-marca-horizontal.svg) center / contain no-repeat;
}

/* fundo: marrom-escuro sobre o gradiente da marca; o texto fica sempre na parte escura (à esquerda) */
.palco, .centro {
  background:
    linear-gradient(100deg, rgba(31,7,2,.97) 0%, rgba(31,7,2,.9) 42%, rgba(31,7,2,.45) 100%),
    url(devont-gradiente.webp) center / cover no-repeat,
    var(--d-escuro);
}
.centro { background-position: center; }

/* títulos: caixa normal, Host Grotesk, uma palavra de ênfase em itálico serifado */
.manchete { text-transform: none; letter-spacing: -.025em; line-height: 1.04; }
.manchete .fina { font-weight: 400; }
.manchete .forte { font-weight: 700; }
.enfase { font-family: var(--fonte-enfase); font-style: italic; font-weight: 400; color: var(--d-ambar); letter-spacing: 0; }
.apoio { color: var(--d-bege-apoio); }
.quem { color: var(--d-bege-apoio); }

.premio { border-top-color: var(--d-terracota); }
.premio b { font-weight: 700; color: var(--d-bege); }
.premio small { color: var(--d-bege-apoio); }
/* régua: traços e números em bege da DEVONT (o estilo.css usa o creme da Bomma) */
.regua .corpo { fill: rgba(242,237,218,.06); stroke: rgba(242,237,218,.28); }
.regua .tique { stroke: rgba(242,237,218,.55); }
.regua .tique.menor { stroke: rgba(242,237,218,.25); }
.regua .num { fill: var(--d-bege-apoio); }
.regua .num.marco-n { fill: var(--d-ambar); font-weight: 700; }

/* cartão claro: bege da marca, ação em marrom-escuro (ação do tema claro), foco em terracota */
.cartao { border-radius: 12px; }
.cartao h2 { font-weight: 400; letter-spacing: -.02em; }
.cartao h2 b { font-weight: 700; }
input, select, textarea { background: var(--d-branco); color: var(--d-escuro); border-radius: 8px; }
input::placeholder { color: var(--d-dica); }
.botao { background: var(--d-escuro); color: var(--d-bege); font-weight: 600; }
.botao:hover { background: var(--d-marrom); }
.botao:focus-visible { outline-color: var(--d-terracota); }
.link-caixa { background: var(--d-branco); border-radius: 8px; }

/* ===== envelope (tela do indicado) ===== */
.env-fundo { background: var(--d-env-fundo); border-radius: 6px; }
.env-frente { background: linear-gradient(180deg, var(--d-env-frente-a), var(--d-env-frente-b)); border-radius: 6px; }
.env-aba { background: linear-gradient(180deg, var(--d-bege), var(--d-env-aba-b)); }
.carta { background: var(--d-branco); color: var(--d-escuro); }
.carta-marca {
  width: 84px; height: 15px; background: var(--d-escuro);
  -webkit-mask: url(devont-wordmark.svg) left center / contain no-repeat;
  mask: url(devont-wordmark.svg) left center / contain no-repeat;
}
.carta b { font-weight: 700; }
.carta em { color: var(--d-terracota); }
/* lacre e selo do cartão: cera âmbar → terracota → marrom, com o símbolo oficial em creme */
.lacre::after, .selo-cartao::after {
  background: var(--d-creme);
  -webkit-mask: url(devont-simbolo.svg) center / contain no-repeat;
  mask: url(devont-simbolo.svg) center / contain no-repeat;
}
.lacre, .selo-cartao {
  box-shadow: 0 4px 10px rgba(0,0,0,.3), inset 0 0 0 6px rgba(0,0,0,.08), inset 0 0 0 7px rgba(242,237,218,.35), inset 0 -3px 6px rgba(0,0,0,.25);
}
.lacre::after { width: 34px; height: 34px; }
.selo-cartao::after { width: 28px; height: 28px; }
.pular { color: var(--d-bege-apoio); border-color: rgba(242,237,218,.3); }
.pular:hover { color: var(--d-bege); border-color: rgba(242,237,218,.5); }

@media (max-width: 860px) {
  .marca { width: 166px; height: 24px; } /* símbolo de 24 px: o mínimo do design system */
  .selo-cartao::after { width: 22px; height: 22px; }
  .palco, .centro {
    background:
      linear-gradient(180deg, rgba(31,7,2,.97) 0%, rgba(31,7,2,.9) 55%, rgba(31,7,2,.6) 100%),
      url(devont-gradiente.webp) center / cover no-repeat,
      var(--d-escuro);
  }
}