/* ==========================================================================
   TOKENS — Site Marcia Rosa
   Fonte da verdade: specs/design.md secoes 3, 4 e 5.
   Nao inventar valor aqui. Mudou? Muda no design.md primeiro.
   ========================================================================== */

:root {
  /* ---------- Cor ---------- */
  --indigo-900: #14122B;
  --indigo-800: #211E44;
  --indigo-700: #2E2A4D;

  --creme:      #FCF7F1;
  --creme-2:    #F6EFE7;

  --coral:      #E5897A;
  --coral-forte:#D0705F;
  --coral-fundo:#FDEAE4;

  --lavanda:    #C4BBDE;
  --lavanda-2:  #EADADD;

  --ouro:       #C9A227;   /* filete, borda, estrela: forma, nao texto */
  --ouro-claro: #E6C86A;   /* ouro sobre indigo */
  /* Ouro legivel como TEXTO. Calibrado no fundo mais escuro dos dois
     em que aparece: 4,75:1 sobre --creme-2 e 5,03:1 sobre --creme.
     O --ouro puro da 2,24:1 e nao serve para numeral nem rotulo. */
  --ouro-texto: #836614;

  /* Nucleo da luz: estrela com halo do ceu vivo e cabeca do filete que
     percorre a borda dos CTAs. Uma cor so para as duas coisas de
     proposito — e a mesma luz, em dois lugares. */
  --branco-estrela: #FFF8E6;

  --texto:      #211E44;
  --texto-suave:#5A5470;
  --texto-claro:#EFE9F2;
  --branco:     #FFFFFF;

  /* ---------- Tipografia ---------- */
  --fonte-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fonte-corpo:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --t-h1:      clamp(2.5rem, 5vw, 3.5rem);        /* 40 -> 56px  hero com split */
  --t-h1-full: clamp(2.75rem, 6vw, 4.25rem);      /* 44 -> 68px  hero full-bleed */
  --t-h2:      clamp(1.875rem, 3.5vw, 2.75rem);   /* 30 -> 44px */
  --t-h3:      clamp(1.25rem, 2vw, 1.5rem);       /* 20 -> 24px */
  --t-card:    1.25rem;                            /* 20px */
  --t-lead:    clamp(1.0625rem, 1.5vw, 1.25rem);  /* 17 -> 20px */
  --t-corpo:   1.0625rem;                          /* 17px */
  --t-peq:     0.875rem;                           /* 14px */
  --t-eyebrow: 0.8125rem;                          /* 13px */
  --t-trecho:  clamp(1.125rem, 1.6vw, 1.25rem);   /* 18 -> 20px, corpo do trecho do livro */
  --t-numeral: 1.125rem;                           /* 18px, numeral de timeline/lista numerada */

  --lh-h1: 1.08;
  --lh-h2: 1.15;
  --lh-h3: 1.3;
  --lh-card: 1.35;
  --lh-lead: 1.55;
  --lh-corpo: 1.7;
  --lh-eyebrow: 1.4;
  --lh-trecho: 1.65;

  /* Medidas de linha em rem, nao em ch:
     a unidade ch mede o "0", ~20% mais largo que a media dos caracteres. */
  --medida-h1:    40rem;   /* ~24 caracteres a 56px */
  --medida-h2:    36rem;   /* ~26 caracteres a 44px */
  --medida-lead:  30rem;   /* ~56 caracteres a 20px */
  --medida-corpo: 36rem;   /* ~68 caracteres a 17px */

  /* ---------- Espaco ---------- */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4rem;
  --e-9: 6rem;     --e-10: 8rem;

  --container: 75rem;                        /* 1200px de CONTEUDO */
  --gutter:    clamp(1.25rem, 4vw, 3rem);    /* 20 -> 48px */
  --gap:       clamp(1.25rem, 2.5vw, 2rem);  /* 20 -> 32px */
  --secao-y:   clamp(5rem, 10vw, 9rem);      /* 80 -> 144px */

  /* ---------- Forma ---------- */
  --r-pill:   999px;
  --r-card:   24px;
  --r-painel: 36px;
  --r-foto:   48% 52% 40% 60% / 55% 45% 55% 45%;

  --sombra-suave: 0 24px 60px -28px rgba(33, 30, 68, .20);
  --sombra-card:  0 12px 32px -16px rgba(33, 30, 68, .14);

  /* Glow dos CTAs. As mesmas tres cores da paleta (--coral, --ouro-claro
     e --lavanda), ja com alfa proprio porque box-shadow precisa da cor
     suavizada. Se a paleta mudar, estes tres valores mudam junto. */
  --glow-coral:   rgba(229, 137, 122, .55);
  --glow-ouro:    rgba(230, 200, 106, .48);
  --glow-lavanda: rgba(196, 187, 222, .50);

  /* Seta dos CTAs, usada como mask para nao ser lida por leitor de tela.
     Sinais de maior/menor percent-encoded e sem "#" no SVG — os dois
     quebram data URI em parte dos navegadores se entrarem crus. */
  --seta-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");

  /* ---------- Movimento ---------- */
  --facilita-chegada: cubic-bezier(.16, 1, .3, 1); /* chegada confiante, sem bounce/elastico */
  --transicao: 200ms ease-out;
  --revelar:   400ms var(--facilita-chegada);
  --rapido:    150ms ease-out;   /* feedback imediato: :active, toggles */

  /* ---------- Header ---------- */
  --altura-header: 64px;
}

@media (min-width: 1024px) {
  :root { --altura-header: 80px; }
}