/* ============================================================================
   niftimobility.com — DESIGN TOKENS
   ----------------------------------------------------------------------------
   Palette and typefaces are inherited from the NiftiOS design system
   (Lease/Pipeline/brand.py) so the brand family reads as one family.

   INHERITED VERBATIM from brand.py — do not drift these:
     --ink  --muted  --line  --bg  --soft
     --orange  --orange-d  --red  --green
     --display (Archivo Black)  --body (Inter)

   PARENT-BRAND ADDITIONS (this site only):
     A calmer, editorial register. Same palette, used differently —
     ink-dominant rather than orange-dominant, wider measure, more air,
     Archivo Black reserved for the wordmark and hero only.
   ========================================================================== */

:root {

  /* ---- Colour: inherited from brand.py ---------------------------------- */
  --ink:      #151515;
  --muted:    #6c6c6c;
  --line:     #ececec;
  --bg:       #faf6f0;
  --soft:     #fff2e4;
  --orange:   #f97316;
  --orange-d: #ea580c;
  --red:      #c0281a;
  --green:    #1e7a45;

  /* ---- Colour: parent-brand extensions --------------------------------- */
  /* Editorial work needs a mid-ink for standfirsts and a paper white for
     raised surfaces. Both are derived from the inherited palette, not new
     brand colours. */
  --ink-2:    #3a3a38;   /* standfirst / deck text */
  --ink-3:    #55534f;   /* long-form body on cream — softer than pure ink */
  --paper:    #ffffff;   /* cards, raised surfaces (matches brand.py .card) */
  --line-2:   #e0dbd2;   /* a warmer rule that reads on cream, not on white */
  --wash:     #f4eee5;   /* alternating section band, one step off --bg */

  /* Focus ring — accessibility, not decoration. */
  --focus:    #1f6feb;

  /* ---- Hero gradient ----------------------------------------------------
     The orange field behind the home-page hero, mirroring niftilease.com so
     the two sites read as siblings. Warm amber in one corner, deep burnt
     orange in the other, with the brand --orange sitting in the middle of the
     ramp — so this is the family colour stretched, not a new colour.
     Text over it is INK, never white. Measured against the darkest end (--hero-3):
     ink 5.79:1, body #241209 5.72:1, white only 3.4:1 — so white is out.
     --hero-3 was lightened from #e04b13 to #ec6a2b precisely to clear 4.5:1
     for the small caps under the wordmark. Do not darken it again. */
  --hero-1:   #fbab3c;
  --hero-2:   #f97316;   /* == --orange */
  --hero-3:   #ec6a2b;

  /* ---- Typography: inherited families ---------------------------------- */
  --display: 'Archivo Black', 'Segoe UI', system-ui, sans-serif;
  --body:    'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ---- Fluid type scale ------------------------------------------------
     clamp(min, preferred, max). Preferred uses vw so type scales with the
     viewport between 380px and ~1400px with no breakpoint jumps.
     Body sits at 17-18px on this site (brand.py consoles use 15px — a
     data-dense UI wants tighter text; an editorial page wants looser). */
  --fs-hero:    clamp(2.25rem, 1.30rem + 4.20vw, 4.50rem);  /* 36 → 72 */
  --fs-h2:      clamp(1.75rem, 1.28rem + 2.10vw, 2.875rem); /* 28 → 46 */
  --fs-h3:      clamp(1.25rem, 1.10rem + 0.66vw, 1.625rem); /* 20 → 26 */
  --fs-h4:      clamp(1.0625rem, 1.01rem + 0.25vw, 1.1875rem);
  --fs-lede:    clamp(1.1875rem, 1.05rem + 0.60vw, 1.5rem); /* 19 → 24 */
  --fs-body:    clamp(1.0625rem, 1.02rem + 0.20vw, 1.125rem);/* 17 → 18 */
  --fs-sm:      0.9375rem;                                   /* 15 */
  --fs-xs:      0.8125rem;                                   /* 13 */
  --fs-eyebrow: 0.75rem;                                     /* 12 */

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-body:    1.72;   /* long-form needs more than brand.py's 1.6 */

  --tr-tight:  -0.022em;
  --tr-wide:    0.14em;  /* eyebrows / all-caps */

  /* ---- Space scale (a 4px base, but only the steps actually used) ------ */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;

  /* Section rhythm — fluid, so mobile does not get 6rem gaps. */
  --section-y: clamp(3.5rem, 2.2rem + 5.5vw, 7.5rem);

  /* ---- Measure (line length) ------------------------------------------- */
  --measure:      68ch;   /* long-form article body */
  --shell:        1180px; /* matches brand.py's max-width, for family feel */
  --shell-narrow: 760px;  /* article column */

  /* ---- Radii + elevation ---------------------------------------------- */
  --r-sm:  8px;
  --r:     12px;
  --r-lg:  16px;   /* matches brand.py .card */
  --r-pill: 100px;

  --shadow-1: 0 1px 2px rgba(21,21,21,.04);
  --shadow-2: 0 2px 4px rgba(21,21,21,.04), 0 8px 24px rgba(21,21,21,.05);
  --shadow-3: 0 4px 8px rgba(21,21,21,.05), 0 16px 40px rgba(21,21,21,.07);

  /* ---- Motion ---------------------------------------------------------- */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur-fast:  140ms;
  --dur:       260ms;
  --dur-slow:  620ms;

  --header-h: 72px;
}

/* Motion is decoration. Anyone who has asked the OS to stop it gets a
   static page — not a slower animation. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}