/* ============================================================
   DESIGN TOKENS — single source of truth
   Mirror of Figma "Color" + "Primitives" collections (v1.2.1)
   File key: RWYMJGell5pQKP2qlI3ehM

   This is the ONE place to edit global brand + structure tokens.
   Every page links this file, so a change here propagates everywhere.

   What lives here:   color · font families · structural grid · motion
   What stays per page: the type SCALE (--fs-*), which varies by page
   ============================================================ */
:root{
  /* --- Color --- */
  --color-paper:           #FAFAFA;
  --color-paper-secondary: #F6F6F6;   /* subtle off-white surface */
  --color-paper-bright:    #FFFFFF;   /* pure-white elevated surface */
  --color-paper-alpha:     rgba(250, 250, 250, 0.88); /* frosted nav */
  --color-ink:             #1A1A1C;
  --color-body:            #4A4A4E;
  --color-muted:           #737373;   /* AA-compliant (4.5:1) for small labels */
  --color-line:            #C7C7CC;
  --color-hairline:        #E3E3E6;
  --color-accent:          #3E8E5A;
  --color-negative:        #8D3426;   /* error / negative (e.g. gate error) */
  --color-brand:           #E82D30;   /* signal red — link underlines (Figma: color/brand → red/500) */

  /* --- Type families --- */
  /* NOTE: Satoshi is display-only; Inter is the real body/UI face. */
  --font-display: "Satoshi", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- Type scale — mirrors Figma "Foundations — Type" (367:1190, rebuilt 2026-07-19) ---
     Values are the Figma desktop sizes; display/heading roles scale fluidly down via clamp.
     Pair with the documented line-heights in comments. */

  /* Display — Satoshi */
  --fs-hero:      clamp(52px, 11vw, 144px);  /* Display/1 · 144 / 95% / -3% · homepage hero only */
  --fs-display:   clamp(48px, 7vw, 96px);    /* Display/2 · 96 / 100% / -2% · page titles */
  --fs-display-3: clamp(32px, 3.9vw, 56px);  /* Display/3 · 56 / 110% / -2% · next-case-study, work-list, gallery */
  --fs-metric:    clamp(40px, 5vw, 64px);    /* Metric   · 64 / 100% / -2% */

  /* Headings — Satoshi */
  --fs-h1: clamp(28px, 2.8vw, 40px);  /* 40 / 48 / -1% · section + decision headings, pull quotes */
  --fs-h2: clamp(26px, 2.4vw, 32px);  /* 32 / 40 / -1% */
  --fs-h3: clamp(22px, 2vw,   28px);  /* 28 / 36 / -1% · card titles */

  /* Text — Inter */
  --fs-subhead: clamp(19px, 1.8vw, 22px);  /* 22 / 34 · covers, subheads */
  --fs-lede:    19px;                       /* 19 / 30 · overview ledes */
  --fs-body:    17px;                       /* 17 / 27 · default body */
  --fs-small:   14px;                       /* 14 / 22 · meta values, card categories */
  --fs-caption: 13px;                       /* 13 / 20 · image captions */

  /* Labels — 11px, +8% tracking, uppercase (JBM Medium mono · Inter Medium sans) */
  --fs-label:   11px;

  /* --- Structural grid — Desktop (>=1069): 12 cols, 64px margin --- */
  --cols:   12;
  --gutter: 24px;
  --margin: 64px;
  --maxw:   1440px;
  --nav-h:  63px;

  /* --- Motion --- */
  --ease-reveal: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Tablet : 735–1068 -> 8 cols, 40px margin */
@media (max-width:1068px){
  :root{ --cols:8; --margin:40px; --nav-h:56px; }
}
/* Mobile : <=734 (down to 320) -> 4 cols, 20px margin */
@media (max-width:734px){
  :root{ --cols:4; --margin:20px; --nav-h:52px; }
}