/* ==========================================================================
   DESIGN TOKENS — Dra. Laiz Andrade (v2 — refresh visual "soft/neumorphic")
   Fonte: Brandbook Completo + protótipo Claude Design (Novo-Site/project).
   Paleta idêntica ao brandbook — só o tratamento visual (sombra/raio) mudou.
   ========================================================================== */

:root {
  /* ---- Cor: paleta de marca ---- */
  --rosa: #E1A7A6;
  --azul: #91B5CF;
  --amarelo: #E8C172;
  --verde: #BACC81;
  --lilas: #AD95C1;
  --bege: #C4A682;
  --creme: #F4F3E1;
  --creme-hover: #ECEBD8;
  --branco: #FFFFFF;
  --rosa-claro: #F0DCDA;
  --azul-claro: #DEE8F0;
  --verde-claro: #EAF0DC;
  --amarelo-claro: #F4E9CE;

  --grafite: #3A2A2E;

  /* ⛔ OS QUATRO DERIVADOS INVENTADOS SAIRAM EM 10/09/2026, e pelo mesmo
     motivo do vinho: nao existem na identidade da Jedoline.

       --cta-rosa #926C6B · --cta-rosa-hover #7E5C5B
       --cta-azul #5E7586 · --cta-azul-hover #4E6373

     Eram eles que conduziam o site: na home antiga ocupavam 0,46% da area da
     pagina renderizada contra 0,07% das SETE cores da marca somadas, ou seja
     seis vezes e meia mais area do que a paleta inteira. Depois desta rodada,
     medido nas doze paginas: as seis cromaticas ocupam 23,01% e o resto dos
     derivados 0,04%, que e ruido de suavizacao de borda.

     ⚠️ Nao recriar nenhum dos quatro. Se uma cor da marca nao passar contraste
     como TINTA, a resposta nao e escurecer a cor ate ela virar outra: e
     inverter, pondo a cromatica como SUPERFICIE e o grafite como tinta.

     --azul-secao #E9EEF3, --azul-borda e --verde-borda saem junto, sem uso.

  /* ⛔ VINHO REMOVIDO EM 10/09/2026, por decisao do Victor.
     Os tokens --vinho / --vinho-hover / --vinho-active existiram de 08 a
     10/09/2026 e eram o CTA da pagina de bio (/links/). Saem porque a cor nao
     existe na identidade da Jedoline: era uma setima cor inventada dentro de um
     sistema de sete cores fechadas. O CTA da /links/ voltou para --rosa com
     tinta grafite (6,63:1). Nao recriar. */

  /* Tintas e bordas derivadas dos tons claros (mesma hue, L menor).
     Texto cinza sobre fundo colorido lava; a tinta certa e um tom mais
     fundo da propria hue do fundo. */
  --azul-tinta: #405663;
  --verde-tinta: #4C6238;
  --rosa-tinta: #6D4C4C;

  --sucesso: #5C7A4E;
  --erro: #A6483F;
  --aviso: #8A5F14;
  --info: #5E7586;

  /* ======================================================================
     SISTEMA "RECORTE" — 10/09/2026
     ----------------------------------------------------------------------
     O que motivou: no CSS anterior as 7 cores da marca somavam 12 aparicoes
     e os derivados escurecidos (--cta-rosa, --cta-azul), que NAO existem na
     identidade, somavam 34. O site era conduzido pelo derivado.

     A regra que inverte isso, e ela vale para todo o site daqui pra frente:

       1. As seis cromaticas sao SUPERFICIE, sempre em 100%. Fundo de card,
          faixa de secao, chip, moldura. Nunca texto.
       2. O grafite #3A2A2E e a TINTA. Sobre as seis, o pior caso e o lilas,
          com 5,06:1, e o melhor e o amarelo, com 7,93:1. Todas passam AA.
       3. Os derivados escurecidos passam a ser SO TINTA e SO BORDA. Perderam
          o papel de superficie, que era o problema.

     Ninguem precisa decidir cor peca a peca: cada familia tem um trio fechado
     (superficie / borda-e-sombra / tinta) e o componente escolhe a familia.
     ====================================================================== */

  /* Tom profundo de cada cromatica: borda e sombra dura do recorte.
     Derivado em OKLCH com a hue travada (desvio medido abaixo de 1,5 grau) e
     lightness calibrada ate 3,0:1 contra a propria superficie, que e o minimo
     da WCAG 1.4.11 para limite nao textual. */
  --rosa-fundo: #8D5151;      /* 3,00:1 sobre --rosa    */
  --azul-fundo: #39627D;      /* 3,02:1 sobre --azul    */
  --amarelo-fundo: #906600;   /* 3,01:1 sobre --amarelo */
  --verde-fundo: #637310;     /* 3,02:1 sobre --verde   */
  --lilas-fundo: #604574;     /* 3,02:1 sobre --lilas   */
  --bege-fundo: #73542A;      /* 3,01:1 sobre --bege    */

  /* Tinta colorida para texto pequeno sobre creme. As tres primeiras da
     familia ja existiam acima (--rosa-tinta, --azul-tinta, --verde-tinta) e
     nao foram tocadas. Estas tres fechavam o buraco. */
  --amarelo-tinta: #825A00;   /* 5,50:1 sobre creme */
  --lilas-tinta: #705884;     /* 5,49:1 sobre creme */
  --bege-tinta: #795C36;      /* 5,52:1 sobre creme */

  /* Veu claro das duas familias que ainda nao tinham um */
  --lilas-claro: #F0E8F8;     /* L* 93,0 · grafite 11,35:1 */
  --bege-claro: #F4E9DD;      /* L* 92,9 · grafite 11,32:1 */

  /* Sombra de recorte: deslocamento duro, zero borrao. E o que substitui o
     par claro/escuro do soft UI, que era justamente o efeito de morfismo. */
  --rec-sm: 3px 3px 0;
  --rec-md: 5px 5px 0;
  --rec-lg: 8px 8px 0;
  --sombra-foto: 0 14px 30px rgba(58, 42, 46, .16);
  --linha: rgba(58, 42, 46, .18);
  --linha-forte: rgba(58, 42, 46, .30);

  --radius-2xl: 34px;
  --radius-band: 56px;
  /* Arco: a forma organica do topo das fotos. Nao e circulo nem retangulo. */
  --arco: 48% 48% 30px 30px / 34% 34% 30px 30px;

  /* ---- Tipografia ---- */
  --font-display: "Capriola", "Georgia", serif;
  --font-body: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Caveat", cursive;

  --text-h1: clamp(2rem, 1.6rem + 1.8vw, 2.75rem);
  --text-h2: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);
  --text-h3: clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);
  --text-body: 1rem;
  --text-lead: 1.0625rem;
  --text-caption: 0.8125rem;

  --lh-display: 1.3;
  --lh-h2: 1.3;
  --lh-h3: 1.35;
  --lh-body: 1.65;
  --lh-caption: 1.4;

  /* ---- Espaçamento (unidade base 8px) ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 5rem;
  --sp-8: 5.5rem;
  --sp-9: 7rem;

  --margin-mobile: 24px;
  --margin-tablet: 48px;
  --margin-desktop: 80px;

  --measure: 62ch;
  --max-content: 1240px;

  /* ---- Raio ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ⛔ AS SEIS SOMBRAS DO "SOFT UI" SAIRAM EM 10/09/2026, com zero uso
     restante: --shadow-xs, -sm, -md, -lg, -inset e -float. Eram o par de
     sombra clara e escura e a sombra interna, que sao exatamente os dois
     efeitos que o sistema "Recorte" substituiu pela sombra deslocada sem
     borrao (--rec-sm/md/lg). Nao recriar. */

  /* ---- Motion (calibrado — nada de loop infinito, exceto decorativos "floaty") ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 560ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}