/* ==========================================================================
   TOKENS — the single source of truth for the design system.
   Values are derived from the Figma boards in /Client_Figma.
   ========================================================================== */

:root {
  /* ---- Colour ------------------------------------------------------------
     Sampled straight off `Colorway.png` (5 swatches) plus the accent yellow
     found on the work cards at the bottom of `hero.png`.                    */
  --c-paper:        #ffffff;   /* Pure White                                */
  --c-mist:         #f4eff6;   /* Lavender Mist — the ground the sheet sits on */
  --c-lilac:        #d7beda;   /* Soft Lavender — pills, buttons, washes    */
  --c-indigo:       #32356f;   /* Deep Indigo                               */
  --c-ink:          #000000;   /* Pure Black                                */
  --c-yellow:       #fed700;   /* single loud accent, used sparingly        */

  /* Tints derived from the five core values. Kept few on purpose. */
  --c-lilac-100:    #f6f0f7;
  --c-panel:        #ede3ef;   /* quiet panel: reads against paper AND mist */
  --c-lilac-200:    #ecdff0;
  --c-lilac-500:    #b68cbc;
  --c-indigo-900:   #1b1d3d;
  --c-ink-900:      #0a0a0a;   /* near-black used for dark sections         */
  --c-ink-700:      #191919;   /* video-still black, from the mockup        */

  /* Text */
  --c-text:         #0a0a0a;
  --c-text-muted:   #5b5560;
  --c-text-faint:   #8c8592;
  --c-text-invert:  #ffffff;
  --c-text-invert-muted: rgba(255, 255, 255, .62);

  /* Lines — always hairlines, never borders that shout */
  --c-rule:         rgba(10, 10, 10, .11);
  --c-rule-soft:    rgba(10, 10, 10, .07);
  --c-rule-invert:  rgba(255, 255, 255, .16);

  /* ---- Typography --------------------------------------------------------
     Display: a transitional serif with ball terminals and a single-storey
     `g`, matching the Figma headline. Text: a geometric grotesque with a
     double-storey `a`, matching the nav and body copy.                      */
  /* Times New Roman is installed on Windows and macOS, so it is used
     directly; Tinos is the metric-compatible webfont fallback for the
     platforms that lack it, and only downloads where it is actually needed. */
  --font-display: "Times New Roman", Tinos, Times, serif;
  --font-sans:    "Instrument Sans", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* Fluid scale. Each step interpolates between a 390px and a 1440px
     viewport, then holds. Numbers are the Figma values at 1440. */
  --t-display:  clamp(2.375rem, 1.4rem + 4vw, 5rem);        /* 80px h1      */
  --t-h2:       clamp(2.375rem, 1.4rem + 4vw,   4rem);     /* 64px         */
  --t-h3:       clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);   /* 40px         */
  --t-h4:       clamp(1.375rem, 1.2rem + .74vw, 1.75rem);  /* 28px         */
  --t-lead:     clamp(1.0625rem, 1rem + .3vw,   1.1875rem);/* 19px         */
  --t-body:     1rem;                                      /* 16px         */
  --t-small:    .875rem;                                   /* 14px         */
  --t-micro:    .75rem;                                    /* 12px         */

  --lh-display: .96;   /* measured 56/58 in the mockup — deliberately tight */
  --lh-tight:   1.08;
  --lh-snug:    1.35;
  --lh-body:    1.6;

  /* Brand book: display is set at -5% tracking, text at -2%. */
  --ls-display: -.05em;
  --ls-tight:   -.05em;
  --ls-normal:  -.02em;
  --ls-wide:    .14em;   /* eyebrow / label tracking                        */

  /* ---- Space -------------------------------------------------------------
     A 4px base. Section rhythm is fluid so the page breathes the same way
     at every width.                                                        */
  --s-1:  .25rem;  --s-2:  .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5:  1.25rem; --s-6:  1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;    --s-20: 5rem;   --s-24: 6rem;

  /* Frame of mist around the white sheet — 72px at 1440 in the mockup. */
  --sheet-margin:  clamp(.75rem, -.64rem + 5.7vw, 4.5rem);
  /* Inner padding of the sheet — 112px at 1440. */
  --gutter:        clamp(1.25rem, -.94rem + 8.98vw, 7.125rem);
  /* Vertical rhythm between sections. */
  --section-y:     clamp(4.5rem, 2rem + 8vw, 9.5rem);

  --maxw:          1296px;  /* sheet width at 1440 */
  --measure:       62ch;    /* comfortable paragraph width */

  /* ---- Shape ------------------------------------------------------------- */
  --r-sheet: 4px;   /* the mockup's sheet is all but square-cornered */
  --r-card:  2px;
  --r-pill:  999px;

  /* ---- Motion ------------------------------------------------------------
     One easing family so every transition on the site feels related.        */
  --e-out:   cubic-bezier(.16, 1, .3, 1);      /* expo out — reveals        */
  --e-inout: cubic-bezier(.76, 0, .24, 1);     /* symmetric — state changes */
  --e-soft:  cubic-bezier(.22, .61, .36, 1);   /* hovers                    */

  --d-fast:  .18s;
  --d-base:  .34s;
  --d-slow:  .7s;
  --d-reveal: .9s;

  --z-nav: 50;
  --z-top: 100;
}