@layer reset, tokens, base, components, templates, utilities;
@layer tokens {
  @font-face { font-family: 'Bodoni Moda'; src: url('../fonts/bodoni-moda-latin.woff') format('woff'); font-style: normal; font-weight: 400 900; font-display: swap; }
  :root {
    --ink: #111; --paper: #fff; --warm-paper: #f5f3ef; --soft-gray: #f1f1f1;
    --muted: #6d6d6d; --line: rgba(17,17,17,.18); --dark: #0e0e0e;
    --wine: #6a2d2b; --coal: #1b1b1b; --focus: #1d4ed8; --error: #a11919;
    --ui: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --display: Didot, 'Bodoni Moda', 'Times New Roman', serif;
    --shell: 1600px; --content: 1440px; --reading: 760px; --gutter: 32px;
    --header: 58px; --admin-bar: 0px; --section: 112px; --major: 160px;
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
    --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px;
    --ease: cubic-bezier(.22,.61,.36,1); --fast: 160ms; --base: 220ms;
  }
  .admin-bar { --admin-bar: 32px; }
  @media (min-width:1536px) { :root { --gutter: 40px; } }
  @media (max-width:1023px) { :root { --gutter: 24px; --section: 96px; --major: 128px; } }
  @media (max-width:782px) { .admin-bar { --admin-bar: 46px; } }
  @media (max-width:767px) { :root { --gutter: 16px; --header: 52px; --section: 72px; --major: 96px; } }
}