/* Gentlemen Bespoke Tailoring · website design tokens
   Load fonts first:
   <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..500;1,6..96,400&family=Archivo:wght@300..600&display=swap" rel="stylesheet">
*/
:root {
  /* Colour */
  --gbt-ink: #0A0A0A;          /* default page ground */
  --gbt-ink-raised: #111110;   /* panels on ink */
  --gbt-ink-sunk: #161615;     /* image placeholders, wells */
  --gbt-champagne: #D2BA98;    /* accent on dark only */
  --gbt-brass: #A88A62;        /* eyebrows and hairlines on dark */
  --gbt-gold: #8E6210;         /* accent on light only */
  --gbt-ivory: #F7F3EA;        /* light section ground */
  --gbt-oyster: #EDE7DC;       /* primary text on dark */
  --gbt-slate: #4A4A46;        /* secondary text on light */

  --gbt-text-on-dark: #EDE7DC;
  --gbt-text-on-dark-2: #CFC6B7;
  --gbt-text-on-dark-3: #8C7C68;  /* captions, 13px and up only */
  --gbt-text-on-light: #1A1A18;
  --gbt-text-on-light-2: #2E2E2A;
  --gbt-text-on-light-3: #4A4A46;

  --gbt-rule-dark: rgba(210,186,152,0.16);
  --gbt-rule-dark-strong: rgba(210,186,152,0.40);
  --gbt-rule-light: rgba(26,26,24,0.20);
  --gbt-rule-light-strong: rgba(26,26,24,0.40);

  /* Type */
  --gbt-font-display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --gbt-font-text: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --gbt-size-display: clamp(40px, 5.2vw, 72px);
  --gbt-size-h1: clamp(32px, 3.6vw, 48px);
  --gbt-size-h2: clamp(26px, 2.6vw, 32px);
  --gbt-size-h3: 22px;
  --gbt-size-lead: 19px;
  --gbt-size-body: 16px;
  --gbt-size-small: 13px;
  --gbt-size-label: 11px;

  --gbt-track-label: 0.24em;
  --gbt-track-button: 0.18em;
  --gbt-track-display-caps: 0.14em;

  /* Space */
  --gbt-space-1: 8px;
  --gbt-space-2: 16px;
  --gbt-space-3: 26px;
  --gbt-space-4: 34px;
  --gbt-space-5: 52px;
  --gbt-space-6: 92px;
  --gbt-section-y: 118px;
  --gbt-section-y-mobile: 72px;
  --gbt-margin-x: 66px;
  --gbt-margin-x-mobile: 24px;
  --gbt-container: 1200px;
  --gbt-measure: 68ch;

  /* Shape and motion */
  --gbt-radius: 0;
  --gbt-hairline: 1px;
  --gbt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --gbt-duration: 400ms;
  --gbt-duration-fast: 180ms;
}