/* ==========================================================================
   AUTO-GENERATED FILE — DO NOT EDIT
   Source:    design/tokens.json
   Regenerate: node scripts/tools/build-tokens.js

   Cascade slot: "tokens" — after widgets, before components. build.js enforces
   this; see docs/CASCADE.md. Every value the site should ever reuse lives here,
   so changing one line here changes it everywhere that consumes the token.
   ========================================================================== */

:root{

  /* ── colors ─────────────────────────────────────────────── */
  --gp-background-default:           #FFF8EE;  /* Page ground. Identical to gp_app background.default, so app and site match. */
  --gp-background-raised:            #FBF3E8;  /* Slightly deeper cream for banded sections. */
  --gp-background-sand:              #F6DEBB;  /* Warm fill on postcard and cult-groceries panels. */
  --gp-background-hover:             #FEF4E6;  /* Hover wash over background.default. */
  --gp-text-primary:                 #303030;  /* Body copy. The most-used ink on the site (21 declarations). */
  --gp-text-muted:                   #827461;  /* Navigation labels, secondary copy, captions. */
  --gp-text-on-dark:                 #FFF8EE;  /* Text on maroon or photographic grounds. */
  --gp-border-hairline:              #ACA397;  /* Rules and dividers. Identical to gp_app selection.fill. */
  --gp-accent-maroon:                #6E1618;  /* Announcement bar, splash wordmark. The 2026 brand accent. */
  --gp-accent-red:                   #9C4141;  /* Active nav underline and current-page marker. */
  --gp-accent-cream:                 #F9DEA5;  /* The cream-yellow of the wordmark, sampled from the artwork itself (79k pixels of it). For type that sits on photography and has to belong to the lockup, e.g. the splash nav. NOT background.sand #F6DEBB, which is close but a different colour doing a different job. */
  --gp-accent-blue:                  #2D5E99;  /* Postcard and merchandise artwork accent. */
  --gp-accent-navy:                  #1A1F39;  /* Deep navy used in illustrated panels. */

  /* ── fontFamilies ─────────────────────────────────────────────── */
  --gp-font-display:                 GAR;  /* ITC Garamond Condensed. Editorial headlines and pull quotes. */
  --gp-font-body:                    SUI;  /* Suisse International. Body copy. */
  --gp-font-mono:                    'Space Mono';  /* Space Mono, SIL OFL 1.1. Matches gp_app's mono family. Replaced MNM on 3 Sep 2026; MNM is aliased to the same files in site.css so the Webflow layer follows. */
  --gp-font-condensed:               FUTPTCOND;  /* Futura PT Condensed. Poster headings. */
  --gp-font-gothic:                  FRANK;  /* Franklin Gothic. Utility headings. */
  --gp-font-hand:                    FELT;  /* Felt Tip Senior. Handwritten captions, e.g. the polaroid names. */

  /* ── fontSize ─────────────────────────────────────────────── */
  --gp-size-micro:                   10px;  /* Legal lines, the announcement bar. */
  --gp-size-caption:                 11px;  /* Captions, footer links, pill labels. */
  --gp-size-label:                   13px;  /* Navigation labels, small caps, buttons. */
  --gp-size-body:                    16px;  /* Default body copy. */
  --gp-size-body-large:              20px;  /* Lead paragraphs, intro copy. */
  --gp-size-title:                   24px;  /* Card and section titles. */
  --gp-size-title-large:             32px;  /* Sub-section headings. */
  --gp-size-heading:                 40px;  /* Section headings. */
  --gp-size-display:                 56px;  /* Page headlines. */
  --gp-size-display-large:           90px;  /* Hero wordmarks. Fluid above this — use vw. */

  /* ── spacing ─────────────────────────────────────────────── */
  --gp-space-xs:                     4px;  /* Icon gaps. */
  --gp-space-sm:                     8px;  /* Tight padding. */
  --gp-space-md:                     16px;  /* Default gap. */
  --gp-space-lg:                     24px;  /* Between related blocks. */
  --gp-space-xl:                     40px;  /* Between sections. */
  --gp-space-xxl:                    72px;  /* Major section breaks. */
  --gp-space-gutter:                 75.5px;  /* Desktop page gutter. Matches the Webflow navbar inset exactly. */
  --gp-space-gutter-tablet:          40px;  /* Gutter at 1200px and below. */
  --gp-space-gutter-small:           28px;  /* Gutter at 991px and below. */
  --gp-space-gutter-mobile:          14px;  /* Gutter at 640px and below. */

  /* ── borderRadius ─────────────────────────────────────────────── */
  --gp-radius-none:                  0px;  /* Default. The design is predominantly square. */
  --gp-radius-sm:                    3px;  /* Buttons. */
  --gp-radius-md:                    10px;  /* Cards, e.g. the store detail panels. */
  --gp-radius-pill:                  999px;  /* Inline action pills. */
  --gp-radius-action:                6px;  /* Inline action pills (Email, Call). Half the effective radius of a fully-rounded pill at this size — 999px renders as 11px on a 22px-tall element, so this is the honest halved value rather than a smaller 999. */

  /* ── button ─────────────────────────────────────────────── */
  --gp-btn-height-sm:                28px;  /* Inline pill actions (Email, Call). */
  --gp-btn-height-md:                38px;  /* Default button. */
  --gp-btn-height-lg:                48px;  /* Primary calls to action. */
  --gp-btn-pad-xsm:                  10px;  /* Horizontal padding, small. */
  --gp-btn-pad-xmd:                  15px;  /* Horizontal padding, default. Matches .w-button. */
  --gp-btn-pad-xlg:                  24px;  /* Horizontal padding, large. */

  /* ── letterSpacing ─────────────────────────────────────────────── */
  --gp-tracking-tighter:             -0.05em;  /* Poster headings. Measured: 31 elements across About and Jobs already sit at exactly -0.05em, and gp_app's letterSpacing.tighter is -5%, so the two repos agree on this step. Migration target for the hard-coded negatives. */
  --gp-tracking-tight:               -0.02em;  /* Large display copy. Measured: 22 elements on About spread -0.013em to -0.029em, centred here. Migration target. */
  --gp-tracking-normal:              0;  /* Body copy and sentence-case text. */
  --gp-tracking-wide:                0.04em;  /* Uppercase values inside cards — enough to open them up without looking spaced. */
  --gp-tracking-wider:               0.1em;  /* Uppercase labels, nav, buttons, footer. The workhorse. */
  --gp-tracking-widest:              0.14em;  /* Uppercase display headings, e.g. the store names. */

  /* ── breakpoints ─────────────────────────────────────────────── */
  --gp-bp-xl:                        1440px;  /* Wide desktop. Webflow sets the polaroid gutter here. */
  --gp-bp-lg:                        1280px;  /* Desktop. */
  --gp-bp-md:                        1200px;  /* Narrow desktop. Navbar cells shrink. */
  --gp-bp-tablet:                    991px;  /* Webflow's tablet breakpoint. The navbar stacks at and below this. */
  --gp-bp-mobile:                    640px;  /* Tightest gutters. */
  --gp-bp-small:                     479px;  /* Webflow's small-mobile breakpoint. */

  /* ── motion ─────────────────────────────────────────────── */
  --gp-motion-slide:                 620ms;  /* Page-to-page view transition, in ms. */
  --gp-motion-header-hide:           450ms;  /* Header slide-away, in ms. */
  --gp-motion-fade:                  350ms;  /* Default fade, in ms. */
  --gp-motion-easing:                cubic-bezier(.55,.06,.24,.98);  /* Standard easing for page motion. */
}