/* ==========================================================================
   tokens.css — the design language of bund-strap.com
   Extracted verbatim from /design-reference/Bund Strap v9 Type.dc.html.
   Every later surface (slot page, configurator, /thanks, emails) is built
   from these. Do not invent values here; they change in Claude Design first.
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------ */
  --bone: #F3F0ED;                       /* paper / type on ink              */
  --ink: #181615;                        /* the ground                       */
  --accent: #FF4F00;                     /* one accent, used sparingly       */

  --hair: rgba(243, 240, 237, 0.16);     /* hairline rule on ink             */
  --hair-ink: rgba(24, 22, 21, 0.16);    /* hairline rule on bone            */
  --rule-input: rgba(24, 22, 21, 0.22);  /* input underline on bone          */
  --placeholder: rgba(243, 240, 237, 0.26);       /* on ink                           */
  --placeholder-ink: rgba(24, 22, 21, 0.60);     /* on bone — 4.5:1, WCAG AA         */

  /* Veils laid over photography, all the ink at varying strength.           */
  --veil-cover: linear-gradient(to top, rgba(24, 22, 21, 0.78) 0%, rgba(24, 22, 21, 0.12) 52%);
  --veil-pad: linear-gradient(to right, rgba(24, 22, 21, 0.9) 0%, rgba(24, 22, 21, 0.25) 62%);
  --veil-pad-narrow: linear-gradient(to top, rgba(24, 22, 21, 0.94) 0%, rgba(24, 22, 21, 0.45) 70%);
  --veil-proc: linear-gradient(to top, rgba(24, 22, 21, 0.9) 0%, rgba(24, 22, 21, 0.15) 60%);
  --veil-mats: rgba(24, 22, 21, 0.66);

  /* --- Typefaces --------------------------------------------------------- */
  --font-display: Archivo, sans-serif;                    /* 800 / 900, caps */
  --font-body: "Inter Tight", system-ui, sans-serif;      /* 400 / 500       */
  --font-mono: "JetBrains Mono", monospace;               /* 400 / 500, 10px */
  --font-serif: "Instrument Serif", serif;                /* italic, accents */

  /* --- Type scale --------------------------------------------------------
     Display sizes are min(vw, svh) pairs so a line never outgrows the
     viewport in either axis. The svh half is dropped under 780px, where
     height is scarce and the vw half is raised instead.                     */
  --t-cover: min(17vw, 23svh);           --t-cover-sm: 19vw;
  --t-word: min(15vw, 22svh);            --t-word-sm: 15vw;
  --t-step: min(13vw, 19svh);            --t-step-sm: 13.5vw;
  --t-join: min(11vw, 15svh);            --t-join-sm: 16vw;
  --t-pad: min(9vw, 13svh);              --t-pad-sm: 12vw;
  --t-mat: min(8.4vw, 12svh);            --t-mat-sm: 10.5vw;
  --t-quote: min(5.6vw, 8svh);           --t-quote-sm: 9.5vw;
  --t-wordmark: 14.2vw;                  --t-wordmark-sm: 22vw;
  --t-preload: clamp(60px, 14vw, 220px);

  --t-body: clamp(15px, 1.3vw, 19px);    /* line-height 1.55                 */
  --t-lead: clamp(20px, 2.2vw, 38px);    /* serif italic, line-height 1.15   */
  --t-serif-inline: clamp(15px, 1.5vw, 21px);
  --t-email: clamp(22px, 2.6vw, 44px);
  --t-field: clamp(15px, 1.4vw, 20px);
  --t-mono: 10px;

  /* Display tracking is negative and tightens as the type grows.            */
  --track-display: -0.05em;
  --track-display-tight: -0.055em;
  --track-display-loose: -0.045em;
  --track-quote: -0.04em;
  --track-mono: 0.24em;
  --track-mono-wide: 0.3em;
  --track-mono-tight: 0.2em;

  /* --- Space -------------------------------------------------------------
     --pad is the page gutter and the unit everything else is measured from. */
  --pad: clamp(14px, 2.2vw, 36px);
  --pad-top: calc(var(--pad) + 34px);    /* clears the fixed top bar         */

  --sp-1: clamp(10px, 1.2vw, 18px);
  --sp-2: clamp(12px, 1.6vw, 22px);
  --sp-3: clamp(14px, 2vw, 26px);
  --sp-4: clamp(16px, 2.2vw, 30px);
  --sp-5: clamp(16px, 2.4vw, 42px);
  --sp-6: clamp(20px, 4vw, 56px);
  --sp-7: clamp(28px, 4vw, 72px);
  --sp-row: clamp(10px, 1.6vw, 26px);
  --sp-form: clamp(16px, 2vw, 28px);
  --sp-tight: clamp(14px, 1.8vw, 24px);

  /* --- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* the house curve           */
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);  /* preloader exit only       */
  --d-fast: 300ms;
  --d-mid: 600ms;
  --d-slow: 900ms;
  --d-reveal: 1100ms;

  /* --- Image treatment ---------------------------------------------------
     Every photograph is graded the same so the set reads as one shoot.      */
  --grade: saturate(0.7) contrast(1.06);
}