/* ==========================================================================
   Design tokens — colors, type, spacing.
   Edit this file to restyle the whole site.
   ========================================================================== */

:root {
  /* Color */
  --color-bg: #faf8f4;
  --color-bg-raised: #f1ede4;
  --color-bg-hover: #e8e3d7;
  /* Lighter than the page, for a card that sits on it like a sheet of paper. */
  --color-bg-light: #fefdfb;
  --color-text: #1c1b18;
  /* Darkened from #6b675c: clears AAA (7:1) on the page background and lifts
     the weakest case, muted text on a raised card, from 4.83 to 6.5. Still
     well short of --color-text, so the hierarchy holds. */
  --color-text-muted: #57544b;
  --color-border: #e3ddcf;
  /* Hover border. Deliberately not off-black: a dark 1px line on a light
     background shows stair-steps around rounded corners on non-Retina screens. */
  --color-border-strong: #bdb39d;
  /* Ink blue: printed-ink links to go with the newspaper serif. */
  --color-link: #1f4e8c;
  --color-link-hover: #163a69;
  --color-accent: #1f4e8c;
  --color-accent-soft: #e6edf6;
  /* Deck controls read as chrome, not as links — off-black keeps them out of
     the way of the photography. */
  --color-control-active: var(--color-text);

  /* Type */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-display: clamp(2.6rem, 5vw + 1rem, 5rem);
  --fs-h1: clamp(2rem, 3vw + 1rem, 3rem);
  --fs-h2: clamp(1.5rem, 2vw + 0.8rem, 2rem);
  --fs-h3: 1.25rem;
  --fs-lead: 1.25rem;   /* 20px */
  --fs-body: 1rem;      /* 16px */
  --fs-small: 0.875rem; /* 14px */
  --fs-tiny: 0.75rem;   /* 12px */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* Sizes are in rem (1rem = 16px at the browser default) so the whole
     layout grows with a visitor's text-size setting, not only with page zoom.
     Hairlines stay in px. */

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8.75rem;

  /* Layout */
  --max-width: 48.75rem;
  --max-width-wide: 67.5rem;
  --radius: 0.375rem;
  --radius-lg: 0.875rem;
  --border-width: 1px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 150ms;
  --dur-med: 350ms;
  --dur-slow: 600ms;
}