/* ==========================================================================
   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. 🔴 NAME COLLISION WITH gp_app, recorded 10 Sep 2026 — READ THIS BEFORE MERGING THE TWO FILES. gp_app's colors.text.primary is #938571, a warm grey. That is NOT this. The roles map across as: this token = gp_app text.body (#555555); and gp_website text.muted (#827461) = gp_app text.primary (#938571). Same words, swapped meanings, in two repos meant to look related. DECISION: gp_website keeps this naming, because 'primary' meaning the main body ink is the conventional reading and gp_app's is the outlier. The change belongs on the app side, and until it happens a shared DTCG source cannot simply union the two files — one of them has to be renamed first, deliberately, in its own commit. */
  --gp-text-muted:                   #827461;  /* Navigation labels, secondary copy, captions. Corresponds to gp_app's colors.text.primary (#938571) by ROLE, not by name or value — see the collision note on text.primary. */
  --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. 🔴 sm (3px), md (10px) and pill (999px) were DELETED on 10 Sep 2026: measured zero uses anywhere, and md and pill described values that appear nowhere in the codebase at all — not even in the frozen Webflow monolith. pill and action also both claimed 'inline action pills', which is the duplicate-token failure the design-system audit names. Do not re-add a radius token before something needs it: the audit found this system declared rather than adopted — 66 tokens against ~71 uses of the scale tokens across 277 KB of CSS. */
  --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. */
}