/* =============================================================================
   Design tokens — derived from the old Squarespace site (benjamindaysmith.com)
   -----------------------------------------------------------------------------
   These values were extracted from the live site's compiled `site.css`
   (export/css/site.css) and the hand-written `custom.css` (export/css/custom.css)
   on 2026-06-01. The goal is to PRESERVE the current look as a baseline; we
   freshen/extend afterwards, so change these deliberately.

   Sources / evidence:
     body        proxima-nova, 15px, line-height 1.6, color #454545, bg #fff
     a           color #0085bd, no underline
     headings    h1 42px; scale h2 36.75 / h3 31.5 / h4 25.2px
     content h1  color #222 (.entry-title / .main h1)
     dark text   #272727 (most-used non-social hex, 75 occurrences)
     accent gold #fdbb11  (custom.css h4 rule — the one bespoke brand color)
     font load   proxima-nova via Adobe Typekit (use.typekit.net)
   ========================================================================== */

:root {
  /* --- Type families -------------------------------------------------------
     The old site used proxima-nova (served via Adobe Typekit). The rebuild
     substitutes self-hosted Montserrat (see fonts.css) — a free geometric sans
     that closely matches Proxima Nova — to drop the Typekit dependency. The
     Helvetica fallback stack matches Squarespace's so text looks right before
     the woff2 loads. */
  --font-body: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: Georgia, serif;          /* used for a few accents on old site */
  --font-mono: "Courier New", monospace;

  /* --- Color palette -------------------------------------------------------
     Pulled from the most-used non-social-icon hex values in site.css plus the
     bespoke accent from custom.css. (Dozens of one-off hexes like #3b5998 in
     site.css are social-brand icon colors and are intentionally excluded.) */
  --color-bg: #ffffff;
  --color-text: #454545;        /* body copy */
  --color-heading: #2e2e2e;     /* content headings (.main h1 = #2e2e2e) */
  --color-ink: #272727;         /* darkest UI text — most-used dark in the CSS */
  --color-muted: #8a8a8a;       /* secondary / meta text */
  --color-rule: #f6f6f6;        /* hairlines, subtle fills */
  --color-link: #0085bd;        /* anchor blue */
  --color-link-hover: #005f87;  /* derived darker shade of link blue */
  --color-accent: #fdbb11;      /* brand gold (custom.css) */

  /* --- Type scale ----------------------------------------------------------
     Old site base body = 15px, line-height 1.6. Heading scale read directly
     off the compiled CSS (h1 42 / h2 36.75 / h3 31.5 / h4 25.2). Rounded the
     fractional Squarespace values to clean numbers. */
  --text-base: 15px;
  --leading-body: 1.6;
  --leading-heading: 1.2;

  --text-h1: 42px;
  --text-h2: 37px;
  --text-h3: 32px;
  --text-h4: 25px;
  --text-h5: 20px;
  --text-h6: 17px;              /* h4-style label size from custom.css (17px) */
  --text-small: 12px;          /* meta / captions (.meta h1 = 12px) */

  --weight-light: 300;         /* old content h1 was weight 100 (Proxima Thin);
                                  Montserrat 300 matches that visual weight */
  --weight-normal: 400;
  --weight-medium: 600;        /* custom.css heading rule used 600 */
  --weight-bold: 700;

  /* --- Spacing scale -------------------------------------------------------
     A simple 4px-based scale. The old site leaned on Squarespace's block
     spacing (~17px line rhythm, 50px section gaps); these tokens approximate
     that rhythm while staying regular and easy to reason about. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* --- Layout --------------------------------------------------------------
     Old site content columns clustered around 432/480/640px for text and used
     wider 1024–1200px frames for galleries. Text measure ~720px keeps blog
     posts readable; gallery/wide uses the larger frame. */
  --content-width: 720px;      /* readable measure for narrow content (About) */
  --post-width: 820px;         /* blog-post body — wider, matching the old post column */
  --frame-width: 1060px;       /* old site's #canvasWrapper max-width */
  --wide-width: 1200px;        /* galleries / full-bleed-ish sections */
  --gutter: 50px;              /* old site's canvas padding */

  /* --- Misc ---------------------------------------------------------------- */
  --radius: 2px;               /* old site was near-square; keep subtle */
  --transition: 150ms ease;
}