/* =============================================================
   Larissa Ruza — Psicóloga · Design Tokens
   Ponto ÚNICO de cor do site. Nada de hex solto nos outros arquivos.

   Paleta da marca (dada, não inventada):
     #C0805F  terracota  — primária
     #804C3E  rust       — secundária
     #8A5540  céu (topo) → #F0E2D6 céu (base)
     #FBF8F5  superfície

   Contraste (WCAG 2.1 AA — texto normal ≥ 4.5:1, texto grande ≥ 3:1),
   medido contra --sand (#FBF8F5):
     rust      #804C3E   6,6:1   ✓ AA em qualquer tamanho  → TEXTO, links, ênfase
     terracota #C0805F   3,0:1   ✗ para texto              → preenchimento, traço, decoração
   Por isso a marca fala em dois registros: o rust carrega a palavra,
   a terracota carrega a forma. As duas aparecem juntas na ênfase do
   display (rust na letra + terracota no traço embaixo).
   ============================================================= */

:root {
  /* ---------- Cor: superfícies ---------- */
  --sand:        #fbf8f5;  /* fundo principal — dado */
  --sand-soft:   #f5eee7;  /* derivado: seção alternada (mix sand + sand-pale) */
  --sand-pale:   #f0e2d6;  /* base do céu — dado; também tags e ênfase no escuro */
  --white:       #ffffff;

  /* Tintas escuras — derivadas do rust puxado ao quase-preto (mantêm a
     temperatura da marca; um cinza neutro deixaria o site frio). */
  --ink:         #241b16;  /* texto principal — 16,0:1 sobre --sand */
  --ink-deep:    #2b1d17;  /* seções escuras (footer, bloco) — 15,3:1 c/ creme */

  /* ---------- Cor: marca ---------- */
  --terracota:   #c0805f;  /* primária — preenchimento, traço, decoração */
  --rust:        #804c3e;  /* secundária — TEXTO de acento, links, botões */
  --rust-deep:   color-mix(in oklab, var(--rust), black 16%);  /* hover do botão */
  --terracota-soft: color-mix(in oklab, var(--terracota), white 62%); /* superfície tênue */

  /* Céu do hero — a COR DA MARCA é a protagonista. Nada de preto, cinza ou
     véu: o #C0805F é levado ao longo do próprio matiz (~22°), perdendo
     luminância e GANHANDO croma. Terracota queimada no alto, brasa na faixa
     do texto, brasa clara no horizonte e o creme dado (#F0E2D6) só no rodapé,
     onde a faixa de nuvens entra.

     O contraste do texto creme (--sand) vem daqui — da SATURAÇÃO, não de uma
     sombra. E a régua é o mínimo, não o máximo: a primeira versão media 6,7:1
     no subtítulo contra os 4,5:1 exigidos, e essa folga toda estava sendo paga
     em marrom. Ela foi devolvida em COR — croma para cima, luminância para
     cima — até encostar no piso. Medido contra #FBF8F5, por stop:
       #8A3410  7,4:1     #9C3F14  6,6:1
       #AA4A1A  5,4:1     #B65420  4,6:1   ← fim da faixa de texto
     Toda a coluna de texto vive entre o topo e o stop de 72%. */
  --sky-1:  #8a3410;  /* topo — terracota em brasa */
  --sky-2:  #9c3f14;
  --sky-3:  #aa4a1a;
  --sky-4:  #b65420;  /* base da faixa de texto */
  --sky-5:  #d9884c;  /* horizonte esquentando */
  --sky-6:  #f0e2d6;  /* creme — dado; rodapé do hero */

  /* A nuvem-colchão do hero. É a MESMA arte de nuvem (nuvem-2.png), recortada
     como máscara e preenchida com o terracota profundo do céu: forma de nuvem,
     cor da marca, parallax próprio. É ela que faz — bonito — o trabalho que o
     véu preto fazia. Nenhum canal neutro: 97/41/14 é o #61290E da marca, não
     um cinza. Enriquece o contraste, mas não o sustenta: o céu já passa em AA
     sozinho, então nenhuma linha depende de uma camada animada. */
     São os próprios tons do céu (--sky-1..3) em transparência: a nuvem é
     sempre um passo mais profunda que o ponto do céu onde ela está. Alpha
     contido de propósito — a primeira tentativa, em 0,92, lia como BORRÃO
     em vez de nuvem. Nuvem tem forma, não é mancha. */
  --sky-cushion:
    linear-gradient(
      180deg,
      rgba(138, 52, 16, 0.58)  0%,
      rgba(156, 63, 20, 0.44) 44%,
      rgba(175, 76, 27, 0.18) 76%,
      rgba(217, 136, 76, 0)  100%
    );

  /* ---------- Cor: semânticos ---------- */
  --bg:            var(--sand);
  --surface:       var(--white);
  --fg:            var(--ink);
  --fg-muted:      rgba(36, 27, 22, 0.66);   /* 5,3:1 sobre --sand ✓ */
  --fg-on-dark:    var(--sand);
  --fg-on-dark-muted: rgba(251, 248, 245, 0.72);
  --fg-on-rust:    var(--sand);
  --fg-on-rust-muted: rgba(251, 248, 245, 0.82); /* 5,0:1 sobre --rust ✓ */
  --border:        rgba(36, 27, 22, 0.12);
  --border-strong: rgba(36, 27, 22, 0.22);
  --border-on-dark: rgba(251, 248, 245, 0.16);

  --accent:        var(--terracota);  /* forma */
  --accent-ink:    var(--rust);       /* palavra */
  --dark-section:  var(--ink-deep);

  --inset-hairline: rgba(36, 27, 22, 0.06) 0 0 0 1px inset;
  --focus-ring:     0 0 0 3px rgba(192, 128, 95, 0.34);

  /* ---------- Tipografia ----------
     Sans em todo o site. A display é a Bricolage Grotesque (variável
     400–800): grotesca humanista, um pouco fora do esquadro — combina com
     "não sou uma psicóloga convencional" sem virar enfeite. Auto-hospedada:
     nenhuma requisição sai do browser do paciente. Zero serif, zero itálico. */
  --font-display: 'Bricolage Grotesque', 'Inter Display', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Fragment Mono', ui-monospace, Menlo, monospace;

  /* Ênfase do display: NUNCA por inclinação. Cor + peso (+ traço terracota). */
  --display-emph-style:  normal;
  --display-emph-color:  var(--rust);
  --display-emph-weight: 700;

  --t-display: clamp(2.75rem, 1.6rem + 4.6vw, 5rem);
  --t-h1:      clamp(2.25rem, 1.5rem + 3.1vw, 3.5rem);
  --t-h2:      clamp(2rem,   1.45rem + 2.3vw, 2.8125rem);
  --t-h3:      clamp(1.5rem, 1.25rem + 1.1vw, 2.1875rem);
  --t-h4:      clamp(1.375rem, 1.2rem + 0.6vw, 1.8125rem);
  --t-h5:      1.375rem;
  --t-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --t-body:    1.125rem;
  --t-sm:      1rem;
  --t-xs:      0.875rem;
  --t-stat:    clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);

  --lh-display: 1.04;
  --lh-tight:   1.1;
  --lh-snug:    1.24;
  --lh-body:    1.28;
  --lh-relaxed: 1.4;
  --lh-loose:   1.5;

  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-caps:    0.08em;

  --otf: 'cv03' on, 'cv04' on, 'cv09' on, 'cv11' on;

  /* ---------- Espaçamento ---------- */
  --sp-xs:    4px;
  --sp-sm:    8px;
  --sp-md:    10px;
  --sp-lg:    12px;
  --sp-xl:    16px;
  --sp-2xl:   20px;
  --sp-3xl:   24px;
  --sp-4xl:   31px;
  --sp-5xl:   48px;
  --sp-6xl:   64px;
  --sp-7xl:   96px;

  --section-y: clamp(72px, 8vw, 140px);
  --gutter:    clamp(20px, 4vw, 64px);
  --maxw:      1280px;
  --maxw-text: 62ch;

  /* ---------- Raios ---------- */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 24px;
  --r-card: 24px;
  --r-pill: 999px;

  /* ---------- Movimento ----------
     Eases preservados do template — a engenharia de movimento é a parte
     que se mantém. Só a cor e o conteúdo mudaram. */
  --ease-brand:  cubic-bezier(0.44, 0, 0.56, 1);
  --ease-drift:  cubic-bezier(0.34, 0.64, 0.34, 1);
  --ease-snap:   cubic-bezier(0.27, 0, 0.51, 1);
  --dur-fast:    0.2s;
  --dur-base:    0.4s;
  --dur-slow:    1s;
  --dur-cinema:  2s;
}

/* Breakpoints (preservados):
   mobile  ≤ 699.98px
   tablet    700px – 1199.98px
   desktop ≥ 1200px                                            */