@layer reset, tokens, base, layout, components, theme;

@layer tokens {
  :root {
    --font-display: Georgia, "Times New Roman", serif;
    --font-body: Arial, Helvetica, sans-serif;

    --text-xs: clamp(.72rem, .7rem + .1vw, .8rem);
    --text-sm: clamp(.85rem, .82rem + .15vw, .95rem);
    --text-base: clamp(1rem, .96rem + .2vw, 1.1rem);
    --text-lg: clamp(1.25rem, 1.1rem + .7vw, 1.75rem);
    --text-xl: clamp(2rem, 1.55rem + 2vw, 3.5rem);
    --text-2xl: clamp(3rem, 2rem + 4vw, 6rem);

    --space-1: .5rem;
    --space-2: .75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4.5rem;
    --space-8: 7rem;

    --page-gutter: clamp(1.25rem, 4vw, 4.5rem);
    --content-max: 1480px;
    --content-narrow: 820px;

    --radius-sm: 4px;
    --radius-md: 12px;
    --radius-lg: 24px;

    --motion-fast: 180ms;
    --motion-base: 420ms;
    --motion-slow: 800ms;
    --ease-standard: cubic-bezier(.22,.61,.36,1);

    --bg: #f5f3ee;
    --surface: #ffffff;
    --text: #171717;
    /* 4.93:1 on --bg; the previous value sat at 4.25 and captions/years
       are set small enough to need the AA threshold. */
    --muted: #6d6961;
    --line: rgba(23,23,23,.15);
    --accent: #7a7367;
  }
}