/* ============================================================
   BECKON PARTNERS, DESIGN TOKENS
   Change anything here and it updates across the whole site.
   ============================================================ */

:root {
  /* ---------- COLOUR: light surfaces ---------- */
  --paper:        #FAF9F7;   /* page background            */
  --paper-2:      #F3F1ED;   /* alternating band           */
  --stone:        #E8E4DC;   /* panels, video plates       */
  --line:         #E2DED6;   /* hairlines on light         */
  --line-strong:  #CFC9BE;

  /* ---------- COLOUR: dark surfaces ---------- */
  --ink:          #0B0B0C;   /* deep black                 */
  --ink-2:        #141517;   /* raised card on dark        */
  --ink-3:        #1D1F22;   /* raised card, second level  */
  --line-dark:    rgba(255, 255, 255, 0.10);
  --line-dark-2:  rgba(255, 255, 255, 0.16);

  /* ---------- COLOUR: text ---------- */
  --text:         #101113;   /* primary on light           */
  --text-2:       #5B5D62;   /* secondary on light         */
  --text-3:       #6A6C71;   /* tertiary / captions        */
  --on-dark:      #F4F2EE;   /* primary on dark            */
  --on-dark-2:    #A3A6AC;   /* secondary on dark          */
  --on-dark-3:    #878A91;   /* tertiary on dark           */

  /* ---------- COLOUR: accent (warm bronze) ---------- */
  --bronze:       #856A41;   /* accent on light            */
  --bronze-lite:  #C7A472;
  --gold-lite:    #C7A472;   /* alias used by the intro */
  --text-dim:     #A9A7A2;   /* unread headline grey     */   /* accent on dark             */
  --bronze-wash:  rgba(133, 106, 65, 0.11);
  --bronze-wash-d:rgba(199, 164, 114, 0.14);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Satoshi", "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Manrope", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE SCALE (fluid) ---------- */
  --fs-display: clamp(2.85rem, 7.4vw, 6.1rem);
  --fs-h1:      clamp(2.45rem, 6.0vw, 4.9rem);
  --fs-h2:      clamp(2.05rem, 4.6vw, 3.6rem);
  --fs-h3:      clamp(1.45rem, 2.6vw, 2.1rem);
  --fs-h4:      clamp(1.15rem, 1.8vw, 1.4rem);
  --fs-lead:    clamp(1.05rem, 1.45vw, 1.28rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-label:   0.6875rem;
  --fs-metric:  clamp(3.6rem, 10vw, 8.5rem);

  --lh-tight:   1.02;
  --lh-snug:    1.12;
  --lh-body:    1.62;
  --ls-display: -0.035em;
  --ls-head:    -0.025em;
  --ls-label:   0.16em;

  /* ---------- LAYOUT ---------- */
  --container:      1240px;
  --container-wide: 1440px;
  --container-text: 760px;
  --gutter:  clamp(1.25rem, 5vw, 4rem);

  --section-y:    clamp(5.5rem, 11vw, 11rem);
  --section-y-sm: clamp(3.5rem, 7vw, 6rem);

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  /* ---------- MOTION ---------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  180ms;
  --dur:       420ms;
  --dur-slow:  820ms;

  /* ---------- ELEVATION ---------- */
  --shadow-sm: 0 1px 2px rgba(11, 11, 12, 0.05);
  --shadow:    0 12px 32px -12px rgba(11, 11, 12, 0.16);
  --shadow-lg: 0 40px 90px -30px rgba(11, 11, 12, 0.28);

  --nav-h: 72px;
}

@media (max-width: 720px) {
  :root { --nav-h: 62px; }
}