/* ==========================================================================
   DESIGN TOKENS · Dr Marlos Queiroz
   Direção: monografia clínica. Branco como respiro, creme para blocos
   editoriais, marrom profundo para os momentos de peso e para os CTAs.
   Paleta restrita a marrom, creme e branco.
   ========================================================================== */

:root {
  /* --- COR · marrom ---------------------------------------------------- */
  --brown-950: #1C1512;   /* âncoras escuras, contraste máximo   */
  --brown-900: #241B16;
  --brown-800: #2B211D;
  --brown-700: #3B2E26;
  --brown-600: #5A463B;   /* marrom médio                        */
  --brown-500: #74604F;
  --brown-400: #8B7461;   /* texto secundário sobre claro        */
  --brown-300: #A89684;
  --brown-200: #C9B8A6;   /* linhas sobre creme                  */
  --brown-100: #E3D8CA;

  /* --- COR · creme e branco -------------------------------------------- */
  --cream-300: #E4D9C9;
  --cream-200: #EDE4D7;
  --cream-100: #F5F0E7;   /* creme dos blocos editoriais         */
  --cream-050: #FBF8F3;
  --white:     #FFFFFF;   /* respiro                             */

  /* --- COR · papéis semânticos ----------------------------------------- */
  --bg:            var(--white);
  --bg-editorial:  var(--cream-100);
  --bg-anchor:     var(--brown-950);

  --ink:           var(--brown-900);
  --ink-2:         var(--brown-600);
  --ink-3:         #7E6958;   /* rótulos pequenos: AA sobre branco e creme */

  --ink-inv:       var(--cream-050);
  --ink-inv-2:     #BCAB99;
  --ink-inv-3:     #9A8779;   /* rótulos pequenos: AA sobre marrom          */

  --line:          rgba(36, 27, 22, 0.13);
  --line-2:        rgba(36, 27, 22, 0.26);
  --line-inv:      rgba(245, 240, 231, 0.16);
  --line-inv-2:    rgba(245, 240, 231, 0.34);

  /* --- TIPOGRAFIA ------------------------------------------------------ */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-body:    "Mulish", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

  /* escala fluida, cadência editorial */
  --fs-micro:  0.6875rem;                                   /* 11px  rótulos  */
  --fs-caption: 0.8125rem;                                  /* 13px           */
  --fs-sm:     0.9375rem;                                   /* 15px           */
  --fs-body:   clamp(1rem, 0.28vw + 0.94rem, 1.125rem);
  --fs-lead:   clamp(1.1875rem, 0.75vw + 1rem, 1.5rem);
  --fs-h4:     clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
  --fs-h3:     clamp(1.375rem, 1.1vw + 1.1rem, 2rem);
  --fs-h2:     clamp(1.875rem, 2.2vw + 1rem, 3.25rem);
  --fs-h1:     clamp(2.625rem, 4.6vw + 1rem, 5.5rem);
  --fs-index:  clamp(3rem, 5vw + 1rem, 6rem);               /* numerais       */

  --lh-display: 0.98;
  --lh-heading: 1.08;
  --lh-body:    1.66;

  --track-label: 0.24em;
  --track-tight: -0.025em;

  /* --- ESPAÇAMENTO ----------------------------------------------------- */
  --space-3xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-sm:  1.125rem;
  --space-md:  2rem;
  --space-lg:  3.5rem;
  --space-xl:  6rem;
  --space-2xl: clamp(4.75rem, 8.5vw, 9rem);

  --gutter:    clamp(1.375rem, 5vw, 5.5rem);
  --measure:   62ch;
  --container: 84rem;

  /* --- BORDAS ---------------------------------------------------------- */
  --radius-small:  2px;
  --radius-medium: 3px;
  --radius-pill:   999px;

  /* --- ANIMAÇÃO -------------------------------------------------------- */
  --transition-fast:   160ms cubic-bezier(0.33, 0, 0.2, 1);
  --transition-medium: 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-slow:   980ms cubic-bezier(0.16, 0.84, 0.30, 1);
  --ease-editorial:    cubic-bezier(0.16, 0.84, 0.30, 1);

  /* --- LAYOUT ---------------------------------------------------------- */
  --header-h:  6rem;
  --header-h-sm: 4.5rem;
}

@media (max-width: 60rem) {
  :root { --header-h: 4.75rem; --header-h-sm: 4rem; }
}