/* ============================================================================
   brand.css — os tokens da marca Owners, num lugar só.
   Criado em 29/09/2026, a pedido dela ("o app precisa parecer a Owners").

   Antes disso os tokens moravam no :root do style.css, misturados com regra de
   componente, e havia uma segunda paleta inteira no
   `@media (prefers-color-scheme: dark)`. Este arquivo é a fonte da verdade:
   style.css não redefine cor, sombra nem raio — usa daqui.

   ⚠️ **O app é SEMPRE bege, decisão dela em 29/09/2026.** O tema escuro foi
   removido de propósito: o que ela chamou de "site institucional escuro" era o
   celular dela no modo escuro disparando aquele @media. A marca é bege + rosa,
   e clube elegante não muda de cor conforme o aparelho de quem abre.
   Por isso `color-scheme: light` — sem isso o navegador ainda escurece campo de
   formulário, barra de rolagem e select por conta própria.

   ⚠️ **Hex da marca é exato, nunca aproximar:** #FFBFDE, #F0E7D7, #DD7BA4.
   ============================================================================ */

:root {
  color-scheme: light;

  /* ---- fundo e tinta ---------------------------------------------------- */
  --bg: #f0e7d7;              /* o bege da marca */
  --bg-soft: #e6dac4;
  --white: #ffffff;           /* cartão sobre o bege */
  --ink: #000000;
  /* ⚠️ Era #000000, igual ao --ink: TODO texto secundário saía em preto cheio,
     e é parte do motivo de a tela parecer "uma lista de textos" — sem hierarquia
     não há leitura, só parede. Este tom dá 6,58:1 sobre o bege (o mínimo exigido
     é 4,5:1), então suaviza sem custar acessibilidade. Medido, não escolhido no
     olho. */
  --ink-soft: #5a4e42;
  --line: #ddcfb0;

  /* ---- rosa Owners ------------------------------------------------------ */
  --pink: #dd7ba4;            /* ação principal, preenchimento */
  --pink-dark: #9f5976;
  --pink-soft: #FFBFDE;
  /* ⚠️ Rosa só pra TEXTO. O #dd7ba4 da marca dá 2,3:1 sobre o bege — some pra
     quem enxerga menos. Este escurece o suficiente e continua a mesma família. */
  --pink-texto: #8f4a66;
  /* ⚠️ Tinta pra texto EM CIMA do rosa. Branco sobre #dd7ba4 dá 2,82:1 e
     reprova; este dá 6,27:1. Não trocar por branco "porque fica mais bonito". */
  --sobre-pink: #2b0f1c;
  --pink-ink: #ffffff;

  /* ---- dourado: SÓ NextWave (decisão dela, 29/09/2026) ------------------- */
  /* ⚠️ O dourado bonito (#b08d4f) dá 2,53:1 sobre o bege — ele é DECORAÇÃO:
     borda, filete, fundo de selo. Texto dourado usa o --ouro-texto, que dá
     5,65:1. Usar o claro em texto é o erro que essa separação existe pra evitar. */
  --ouro: #b08d4f;
  --ouro-soft: #efe2c6;
  --ouro-texto: #6f5623;

  /* ---- semáforo --------------------------------------------------------- */
  --ok: #2e7d5b;
  --warn: #8a5a1b;
  --crit: #b03a2e;

  /* ---- tipografia ------------------------------------------------------- */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --txt-xs: 11.5px;
  --txt-sm: 13px;
  --txt-md: 15px;
  --txt-lg: 17px;
  --txt-xl: 22px;
  --txt-2xl: 28px;

  /* ---- espaçamento: escala de 4, pra parar de escrever 13px e 18px ------ */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;

  /* ---- raios e sombras -------------------------------------------------- */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.05), 0 4px 10px -6px rgba(26, 26, 26, 0.18);
  --shadow: 0 1px 2px rgba(26, 26, 26, 0.04), 0 10px 26px -16px rgba(26, 26, 26, 0.22);
  --shadow-lg: 0 2px 4px rgba(26, 26, 26, 0.06), 0 20px 44px -22px rgba(26, 26, 26, 0.3);

  /* ---- medidas da casca ------------------------------------------------- */
  --nav-h: 64px;
  /* ⚠️ Ela pediu 28–32px, e isso valia pro arquivo antigo, que era um lockup de
     DUAS linhas. O vetor de 30/09 tem TRÊS ("OWNERS" / "CLUB" / o script "influ
     match"), então a mesma altura dá um terço pra cada linha: a 30px o script
     vira um borrão rosa ilegível. 36px é o menor valor em que ele se lê, medido
     no iPhone. Se ela preferir menor, é só baixar aqui — o resto se ajusta. */
  --header-logo-h: 36px;      /* logo no topo da home */
  --header-marca-h: 24px;     /* o mesmo logo, pequeno, nas telas internas */
  --toque: 44px;              /* área mínima de toque (Etapa 5) */

  /* ---- o véu escuro que deixa texto legível sobre foto ------------------- */
  --veu-foto: linear-gradient(180deg, rgba(20, 14, 10, 0.15) 0%, rgba(20, 14, 10, 0.55) 45%, rgba(20, 14, 10, 0.86) 100%);
}

/* ⚠️ Modo de alto contraste continua existindo: quem liga isso no sistema pede
   mais contraste, e aqui a gente devolve o preto cheio e a borda em tudo. Não é
   o mesmo que o tema escuro que saiu — é preferência de acessibilidade. */
@media (prefers-contrast: more) {
  :root {
    --ink-soft: #2a241d;
    --pink-texto: #6d3049;
    --ouro-texto: #4a3a12;
  }
  .chip, .card, .campaign-card, .aula-row { border: 1px solid currentColor; }
  a, .section-title-link { text-decoration-thickness: 1px; }
}

/* A marca d'água: o logo atrás do conteúdo, discreto, no canto de baixo à
   direita. Pedido dela — "10% de opacidade" — no card de campanha e no do curso.
   ⚠️ `z-index: 0` + os filhos do cartão no nível 1 (ver style.css): elemento
   posicionado pinta ACIMA do que está no fluxo, então sem isso o logo, mesmo a
   10%, virava um borrão em cima do botão "Quero participar".
   `pointer-events: none` é o cinto de segurança do mesmo problema — se um dia
   alguém subir o z-index, o toque no canto do cartão continua funcionando. */
.marca-dagua {
  position: absolute;
  right: var(--esp-3);
  bottom: var(--esp-3);
  width: 46px;
  height: auto;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}