:root {
  /* ── Colors ── */
  --color-vinho:   #572D2D;
  --color-dark:    #3E332E;
  --color-areia:   #CFC3A9;
  --color-folha:   #7A7B5E;
  --color-terra:   #734723;
  --color-terra-mais-escura-bg: #201A18;
  --color-neblina: #E8E2D4;

  /* ── Semantic ── */
  --color-bg:           var(--color-dark);
  --color-bg-alt:       #2A2320;
  --color-text:         var(--color-areia);
  --color-text-muted:   var(--color-folha);
  --color-primary:      var(--color-vinho);
  --color-border:       rgba(217, 214, 186, 0.15);

  /* ── Typography ── */
  --font-display:      'PP Writer', Georgia, serif;
  --font-display-text: 'PP Writer Text', Georgia, serif;
  --font-ui:           'Area Extended', sans-serif;
  --font-body:         'Cormorant Garamond', Georgia, serif;
  --font-size-base: 16px;

  /* ── Spacing — escala de 4px, o número é o multiplicador ── */
  --sp-1:       4px;
  --sp-2:       8px;
  --sp-4:       16px;
  --sp-6:       24px;
  --sp-8:       32px;
  --sp-12:      48px;
  --sp-16:      64px;
  --sp-20:      80px;
  --sp-section: 120px;

  /* ── Grid — layout fluido: largura = 100% da tela, respeitando a margem lateral ── */
  --grid-columns: 12;
  --grid-gutter:  24px;
  --grid-margin:  64px;   /* > 1024px (desktop). Vira 24px em ≤1024px, ver abaixo */

  /* ── Border-radius (uso opcional, nenhuma seção usa até agora) ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ── Box-shadow (uso opcional) ── */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg: 0 32px 80px rgba(0,0,0,0.14);

  /* ── Motion (usado pelo utilitário .reveal genérico, ver utilities.css) ── */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t:    .3s cubic-bezier(.22, .61, .36, 1);

  /* ── Type Scale — XL ≥1025px ── */
  --fs-t0: 11rem;     --lh-t0: 0.95;  /* maior que t1 — títulos-impacto (ex: vazando sobre foto) */
  --fs-t1: 7.5rem;    --lh-t1: 1.2;
  --fs-t2: 5.5rem;    --lh-t2: 1.2;
  --fs-t3: 4rem;      --lh-t3: 1.2;
  --fs-t4: 3rem;      --lh-t4: 1.2;
  --fs-t5: 2.25rem;   --lh-t5: 1.2;
  --fs-t6: 1.75rem;   --lh-t6: 1.2;
  --fs-t7: 1.5rem;    --lh-t7: 1.2;

  /* Tracking padrão dos títulos (4%) */
  --tracking-title: 0.04em;

  /* Peso padrão dos títulos — PP Writer Thin */
  --weight-title: 100;

  /* Subtítulos (Area Extended) */
  --weight-subtitle:        400;
  --weight-subtitle-strong: 600; /* Area Extended SemiBold — destaque de UI */
  --tracking-subtitle:      0.12em;

  /* Corpo de texto (Cormorant Garamond) */
  --weight-body:   400;
  --tracking-body: 0;

  --fs-body-lead:  1.5rem;
  --fs-body-base:  1.25rem;
  --fs-body-deci:  1rem;
  --fs-body-centi: 0.875rem;
  --lh-body: 1.4;

  --fs-ui-lead:  1.25rem;
  --fs-ui-base:  1rem;
  --fs-ui-deci:  0.875rem;
  --fs-ui-centi: 0.75rem;
  --lh-ui: 1.8;
}

/* ── Type Scale — MD 769–1024px ── */
@media (max-width: 1024px) {
  :root {
    /* Margem lateral: 24px do celular até o tablet (≤1024px) */
    --grid-margin: 24px;

    --fs-t0: 8rem;
    --fs-t1: 5.5rem;
    --fs-t2: 4rem;
    --fs-t3: 3rem;
    --fs-t4: 2.25rem;
    --fs-t5: 1.75rem;
    --fs-t6: 1.5rem;
    --fs-t7: 1.25rem;

    --fs-body-lead:  1.375rem;
    --fs-body-base:  1.125rem;
    --fs-body-deci:  0.9375rem;
    --fs-body-centi: 0.8125rem;

    --fs-ui-lead:  1.125rem;
    --fs-ui-base:  0.9375rem;
    --fs-ui-deci:  0.8125rem;
    --fs-ui-centi: 0.6875rem;
  }
}

/* ── Type Scale — SM ≤768px ── */
@media (max-width: 768px) {
  :root {
    --fs-t0: 5rem;
    --fs-t1: 3.5rem;
    --fs-t2: 2.75rem;
    --fs-t3: 2rem;
    --fs-t4: 1.75rem;
    --fs-t5: 1.5rem;
    --fs-t6: 1.25rem;
    --fs-t7: 1.125rem;

    --fs-body-lead:  1.25rem;
    --fs-body-base:  1rem;
    --fs-body-deci:  0.875rem;
    --fs-body-centi: 0.75rem;

    --fs-ui-lead:  1rem;
    --fs-ui-base:  0.875rem;
    --fs-ui-deci:  0.75rem;
    --fs-ui-centi: 0.625rem;
  }
}