/* ============================================================
   Design Tokens — Velvet Quill Publishing
   All values from the spec (§4). Edit here, never inline.
   ============================================================ */

:root {
  /* Palette */
  --ground:  #FAF8F3;
  --ink:     #2B2722;
  --claret:  #8E3B4E;
  --muted:   #9A988F;
  --line:    #E7E5DE;

  /* Typography */
  --font-wordmark: 'Newsreader', serif;
  --font-display:  'Cormorant Garamond', serif;
  --font-body:     'EB Garamond', serif;

  /* Type scale — desktop */
  --size-wordmark:  66px;
  --size-tagline:   27px;
  --size-h2:        34px;
  --size-h3:        24px;
  --size-body:      19px;
  --size-meta:      13px;
  --size-label:     12px;

  /* Line heights */
  --lh-wordmark: 1.0;
  --lh-tagline:  1.45;
  --lh-h2:       1.2;
  --lh-h3:       1.3;
  --lh-body:     1.7;
  --lh-meta:     1.5;

  /* Letter spacing */
  --ls-label: 0.2em;
  --ls-meta:  0.14em;

  /* Spacing scale (8px base) */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* Section vertical padding */
  --section-pad: 112px;

  /* Layout */
  --width-content: 1100px;
  --width-reading:  680px;
  --gutter:          40px;

  /* Hairline rule */
  --rule-w: 44px;
  --rule-h: 1.5px;
  --rule-color: var(--claret);
}

/* Mobile overrides */
@media (max-width: 639px) {
  :root {
    --size-wordmark: 40px;
    --size-tagline:  20px;
    --size-h2:       26px;
    --size-h3:       20px;
    --size-body:     17px;

    --section-pad: 60px;
    --gutter:      22px;
  }
}