/* ============================================================
   ESPAÇO PENSARE — sistema de design
   Cores amostradas do logotipo oficial e das fotos dos ambientes.
   Nada de valor fixo fora deste arquivo.
   ============================================================ */

/* ---- 1. FONTES ------------------------------------------- */

@font-face {
  font-family: 'Pensare Script';
  src: url('../fonts/pensare-script.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --f-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --f-corpo: 'Figtree', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --f-marca: 'Pensare Script', 'Cormorant Garamond', cursive;
}

/* ---- 2. CORES DA MARCA ----------------------------------- */

:root {
  /* neutros — todos puxados para o rosado do papel do logotipo,
     nenhum cinza puro em lugar nenhum do site */
  --papel:      #F2E8E6;  /* fundo do logotipo; base do site       */
  --papel-alto: #FBF7F6;  /* cartões e superfícies elevadas        */
  --areia:      #E7D9D3;  /* faixas e divisões sutis               */
  --linha:      #DFCFC9;
  --linha-forte:#C9B2AB;

  /* tinta */
  --tinta:      #33262A;  /* texto corrido                         */
  --tinta-2:    #6B5754;  /* texto secundário                      */
  --tinta-3:    #796562;  /* legendas e rótulos; 4,53:1 no papel   */

  /* assinatura */
  --bordo:      #8C5453;  /* cor principal da marca                */
  --bordo-esc:  #6E3E3D;  /* hover e texto sobre fundo claro       */
  --bordo-luz:  #C3A09E;  /* meio-tom do logotipo                  */
  --terracota:  #B5714F;  /* parede da recepção; acento quente     */

  /* sobre fundo bordô */
  --sobre-bordo:      #FAF5F3;
  --sobre-bordo-2:    rgba(250,245,243,.72);
  --sobre-bordo-3:    rgba(250,245,243,.42);
  --linha-sobre-bordo:rgba(250,245,243,.18);
}

/* ---- 3. PAPÉIS SEMÂNTICOS -------------------------------- */
/* As seções trocam de base mudando estas quatro variáveis.
   Nenhum componente conhece a cor real — só o papel.          */

:root,
[data-base="claro"] {
  --fundo:        var(--papel);
  --fundo-alto:   var(--papel-alto);
  --texto:        var(--tinta);
  --texto-2:      var(--tinta-2);
  --texto-3:      var(--tinta-3);
  --borda:        var(--linha);
  --acento:       var(--bordo);
  --acento-hover: var(--bordo-esc);
  --btn-fundo:    var(--bordo);
  --btn-texto:    var(--sobre-bordo);
}

[data-base="bordo"] {
  --fundo:        var(--bordo);
  --fundo-alto:   #7A4342;
  --texto:        var(--sobre-bordo);
  --texto-2:      var(--sobre-bordo-2);
  --texto-3:      var(--sobre-bordo-3);
  --borda:        var(--linha-sobre-bordo);
  --acento:       #EBC7A6;
  --acento-hover: #F5E2C4;
  --btn-fundo:    var(--sobre-bordo);
  --btn-texto:    var(--bordo);
}

/* ---- 4. ESCALA TIPOGRÁFICA ------------------------------- */

:root {
  --t-xs:   0.78rem;   /* 12.5px — etiquetas em caixa alta   */
  --t-sm:   0.875rem;  /* 14px   — legendas                  */
  --t-base: 1.03rem;   /* 16.5px — corpo                     */
  --t-lg:   1.16rem;   /* 18.5px — corpo destacado           */
  --t-xl:   1.375rem;  /* 22px   — subtítulo                 */
  --t-2xl:  clamp(1.6rem,  1.1rem + 1.9vw, 2.15rem);
  --t-3xl:  clamp(2rem,    1.2rem + 3.2vw, 2.9rem);
  --t-4xl:  clamp(2.6rem,  1.4rem + 5vw,   4.5rem);

  --lh-justo:  1.08;
  --lh-titulo: 1.16;
  --lh-corpo:  1.62;

  --ls-titulo: -0.018em;
  --ls-etiqueta: 0.16em;

  --medida: 66ch;   /* largura máxima de texto corrido */
}

/* ---- 5. ESPAÇAMENTO -------------------------------------- */

:root {
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px;  --e-6: 32px;  --e-7: 48px;  --e-8: 64px;
  --e-9: 96px;  --e-10:128px;

  --secao-y: clamp(64px, 9vw, 128px);
  --margem-x: clamp(20px, 5vw, 48px);
  --largura: 1240px;
  --largura-texto: 760px;
}

/* ---- 6. FORMA -------------------------------------------- */
/* O espaço real é feito de arcos: a parede curva da recepção,
   o nicho do criativo, o forro ondulado. O site cita isso.    */

:root {
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pilula: 999px;
  --arco: 50% 50% var(--r-lg) var(--r-lg) / 32% 32% var(--r-lg) var(--r-lg);

  --sombra-sm: 0 1px 2px rgba(51,38,42,.05), 0 4px 12px -6px rgba(51,38,42,.12);
  --sombra-md: 0 2px 4px rgba(51,38,42,.05), 0 16px 32px -16px rgba(51,38,42,.20);
  --sombra-lg: 0 4px 8px rgba(51,38,42,.06), 0 32px 64px -24px rgba(51,38,42,.28);
}

/* ---- 7. MOVIMENTO ---------------------------------------- */

:root {
  --mov-rapido: 160ms cubic-bezier(.4,0,.2,1);
  --mov-medio:  320ms cubic-bezier(.4,0,.2,1);
  --mov-lento:  680ms cubic-bezier(.16,1,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mov-rapido: 1ms;
    --mov-medio: 1ms;
    --mov-lento: 1ms;
  }
}