:root{
  /* ============ ESCALAS ============
     Extraídas das capas, que são a única referência de marca que existe.
     plum = a nuvem do fundo · gold = o núcleo do clarão no olho (#FCDF89,
     aqui em meio-tom) · ink = neutro quente, tirado das sombras da capa,
     com croma travado baixo pra não competir com as duas de marca.
     Geradas em OKLCH pra os degraus terem distância perceptual parelha. */
  /* plum · H 352° */
  --plum-50: #FEF2F7;
  --plum-100: #FEE1ED;
  --plum-200: #FBC5DB;
  --plum-300: #EEA5C4;
  --plum-400: #D781A7;
  --plum-500: #B86189;
  --plum-600: #9C4970;
  --plum-700: #7F3659;
  --plum-800: #612542;
  --plum-900: #46172E;
  --plum-950: #280718;

  /* gold · H 85° */
  --gold-50: #FCF5E6;
  --gold-100: #F6E9CF;
  --gold-200: #EAD4A7;
  --gold-300: #D8BA79;
  --gold-400: #BF9B4A;
  --gold-500: #A17C1C;
  --gold-600: #856406;
  --gold-700: #6A4E01;
  --gold-800: #4F3A00;
  --gold-900: #372801;
  --gold-950: #1D1300;

  /* ink · H 39° */
  --ink-50: #F8F5F4;
  --ink-100: #EFE9E7;
  --ink-200: #DED5D1;
  --ink-300: #C7BBB6;
  --ink-400: #AB9D98;
  --ink-500: #8D7E79;
  --ink-600: #746661;
  --ink-700: #5C504C;
  --ink-800: #453B38;
  --ink-900: #302826;
  --ink-950: #191412;

  /* ============ SEMÂNTICA ============ */
  --bg:            var(--ink-950);
  --bg-alt:        #171110;
  --bg-vidro:      #120D0C;   /* fundo da pílula do menu, sob o blur */
  --surface:       #201817;
  --line:          #2E2422;
  --line-forte:    #43332F;

  --texto:         var(--ink-100);
  --texto-suave:   var(--ink-400);
  --texto-forte:   #FFFDFB;
  --acento:        var(--gold-400);
  --acento-forte:  var(--gold-300);
  --marca:         var(--plum-400);

  /* ============ TIPOGRAFIA ============
     Georgia carrega o discurso (é serifada, tem peso de escritura).
     Bricolage entra em rótulo, botão e número: contraste sem ruído.

     Calibrado contra as referências: memorisely usa h1 56px com tracking
     -0.04em e corpo de 14px; dock.cool usa display 60px com line-height
     1.0 e -0.05em. A versão anterior tinha display em 1.1/-0.015em e
     corpo em 18px/1.68, o que lia como blog. A distância entre display e
     corpo é metade do que faz parecer desenhado. */
  --serif: Georgia, "Times New Roman", serif;
  --sans:  "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;

  --t-rotulo:   13px;                        /* rótulo técnico, caixa natural */
  --t-eyebrow:  clamp(11px, .7vw, 12px);
  --t-micro:    13px;
  --t-corpo:    clamp(15px, 1.02vw, 16px);
  --t-lead:     clamp(17px, 1.28vw, 20px);
  --t-h4:       clamp(20px, 1.55vw, 24px);
  --t-h3:       clamp(19px, 1.45vw, 22px);
  --t-h2:       clamp(32px, 3.9vw, 56px);
  --t-h35:      clamp(24px, 2.2vw, 32px);   /* entre h3 e h2: remates */
  --t-h1:       clamp(29px, 3.4vw, 46px);
  --t-display:  clamp(72px, 15vw, 220px);    /* a palavra gigante atrás do livro */

  --lh-display: .88;
  --lh-titulo:  1.02;
  --ls-display: -.045em;
  --ls-titulo:  -.03em;

  /* ============ MEDIDAS ============ */
  --cont-desktop: 1440px;   /* conteúdo em desktop */
  --cont-laptop:  1140px;   /* conteúdo em laptop */
  --cont-leitura:  720px;   /* coluna estreita: conforto de leitura */
  --gutter: clamp(20px, 4vw, 48px);
  --nav-topo: 16px;   /* respiro da pílula até o topo */
  --nav-h:    62px;   /* altura medida da pílula */

  /* ritmo vertical em múltiplos de 4 */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 160px;

  --r-sm: 6px;  --r-md: 10px;  --r-lg: 18px;  --r-full: 999px;

  --sombra-suave: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --sombra-alta:  0 2px 6px rgba(0,0,0,.5), 0 24px 64px rgba(0,0,0,.45);
}