/* =============================================================
   Psicóloga Dárquia Moreira · Vila Bocaina, Mauá (SP)
   Design tokens. Ponto único de cor e de tipografia do site.

   A paleta desta marca tem vocabulário próprio: areia, barro, musgo,
   oliva, âmbar e tinta. Nada de rampa numérica (--color-100,
   --blue-500): um site que se chama pelo nome das suas cores é um
   site que ninguém confunde com outro.

   Paleta da marca (definida no brief, não inventada):
     areia   #EDE4D6   fundo principal
     barro   #C9B79C   superfície de apoio, faixas discretas
     musgo   #6E7C5C   acento decorativo
     oliva   #3F4A38   primária: ênfase, botões, links, seções escuras
     ambar   #C7A34E   acento quente, rótulos e detalhes
     tinta   #23291F   texto principal

   Cada par texto/fundo em uso está com o contraste medido ao lado.
   Mínimo AA (4.5:1) para texto de corpo, sem exceção.
   ============================================================= */

:root {
  /* ---------- Cor: as seis da marca ---------- */
  --areia:  #ede4d6;   /* fundo principal, do brief */
  --barro:  #c9b79c;   /* superfície de apoio, faixas discretas, brief */
  --musgo:  #6e7c5c;   /* acento decorativo, 3.55:1 sobre --areia. NUNCA vira texto */
  --oliva:  #3f4a38;   /* primária, 7.42:1 sobre --areia */
  --ambar:  #c7a34e;   /* acento quente, 1.9:1 sobre --areia. Só detalhe, nunca texto claro */
  --tinta:  #23291f;   /* texto principal, 11.84:1 sobre --areia */

  /* ---------- Cor: derivadas, todas com nome ---------- */
  --papel:       #fbf7f0;  /* card e superfície elevada, --tinta rende 13.96:1 aqui */
  --areia-fumo:  #e4d9c8;  /* faixa suave, um degrau abaixo do fundo */
  --oliva-fundo: #2b3226;  /* seções escuras (rodapé, bloco de fricção) */
  --oliva-press: #333d2d;  /* hover do botão escuro, desce dentro da própria paleta */
  --musgo-fundo: #556243;  /* o musgo rebaixado até 5.19:1 sobre --areia:
                              é ESTE que pode virar rótulo, ícone ou seta no claro */
  --tinta-suave: #565e4c;  /* texto secundário, 5.38:1 sobre --areia e 6.34:1 sobre --papel */
  --barro-lavado:#f3ece1;  /* lavado: painéis de ilustração, avisos */

  /* ---------- Céu do hero (gradiente literal do brief) ---------- */
  --ceu-topo:  #3f4a38;
  --ceu-base:  #ede4d6;
  --ceu-stop:  84%;

  /* Véu de leitura. O pior fundo do título não é o degradê: é uma amonite
     clara passando por trás dele. O piso do brief é 0.55; medido no
     browser, é abaixo disso que a ênfase do título começa a cair de 3:1.
     Não baixar sem medir de novo. */
  --ceu-veu:   rgba(35, 41, 31, 0.58);

  /* ---------- Cor: semânticos ---------- */
  --bg:            var(--areia);
  --surface:       var(--papel);
  --fg:            var(--tinta);
  --fg-muted:      var(--tinta-suave);
  --fg-on-dark:    #f6efe4;                      /* 10.9:1 sobre --oliva-fundo */
  --fg-on-dark-mu: rgba(246, 239, 228, 0.80);    /*  7.4:1 sobre --oliva-fundo */
  --border:        rgba(35, 41, 31, 0.14);
  --border-strong: rgba(35, 41, 31, 0.26);
  --accent:        var(--oliva);
  --dark-section:  var(--oliva-fundo);

  --inset-hairline: rgba(35, 41, 31, 0.07) 0 0 0 1px inset;

  /* ---------- Tipografia ----------
     Sora no display, Karla no corpo, Spline Sans Mono nos rótulos.
     Todas sem serifa: serif é proibida neste projeto, e itálico
     também. A ênfase do display se faz por COR e PESO. */
  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Karla', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, Menlo, monospace;

  --display-weight:      500;
  --display-emph-style:  normal;      /* regra dura: nenhum itálico no site */
  --display-emph-color:  var(--oliva);
  --display-emph-weight: 700;

  /* Escala fluida entre mobile e desktop */
  --t-display: clamp(2.125rem, 1.2rem + 3.9vw, 3.75rem);     /* hero  34 → 60px */
  --t-h1:      clamp(2rem, 1.4rem + 2.6vw, 3.25rem);         /* 32 → 52px */
  --t-h2:      clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem);     /* 28 → 42px */
  --t-h3:      clamp(1.5rem, 1.28rem + 0.95vw, 2rem);        /* 24 → 32px */
  --t-h4:      clamp(1.3125rem, 1.18rem + 0.55vw, 1.625rem); /* 21 → 26px */
  --t-h5:      1.375rem;                                     /* 22px */
  --t-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);    /* 17 → 19px */
  --t-body:    1.0625rem;                                    /* 17px */
  --t-sm:      1rem;                                         /* 16px */
  --t-xs:      0.875rem;                                     /* 14px */
  --t-stat:    clamp(1.75rem, 1.35rem + 1.7vw, 2.625rem);

  --lh-display: 1.08;
  --lh-tight:   1.16;
  --lh-snug:    1.3;
  --lh-body:    1.42;
  --lh-relaxed: 1.48;
  --lh-loose:   1.62;
  --lh-prose:   1.7;   /* corpo longo, a página respira como a sessão */

  --ls-display: -0.022em;
  --ls-tight:   -0.008em;
  --ls-caps:    0.09em;

  /* ---------- Espaçamento (escala 8) ---------- */
  --sp-xs:    4px;
  --sp-sm:    8px;
  --sp-md:    10px;
  --sp-lg:    12px;
  --sp-xl:    16px;
  --sp-2xl:   20px;
  --sp-3xl:   24px;
  --sp-4xl:   32px;
  --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 e durações do sistema. Não renomear: js/main.js depende
     deles para o reveal em spring e para o parallax das camadas. */
  --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 do sistema (preservados do exemplar):
   mobile  ≤ 699.98px
   tablet    de 700px a 1199.98px
   desktop ≥ 1200px                                            */