/* ==========================================================================
   Mekano Design — design tokens
   Derived from: "Mekano Design - Home page.SVG" (colours, radii)
                 HOME.png @2x, ink-band measurement (type, metrics)
   Frame: 1440 x 7196
   Font:  Poppins (confirmed by owner) — self-hosted variable woff2

   Values marked NEEDS CONFIRM are within measurement tolerance of two
   possible Figma values. Confirm in Dev Mode before the build is signed off.
   ========================================================================== */

:root {

  /* ---------- colour ---------------------------------------------------- */
  /* counts = occurrences in the SVG, highest first */

  --ink:            #212121;   /* 57x — primary text, dark sections, dark cards */
  --muted:          #888888;   /* 36x — secondary text, de-emphasised heading half */
  --gold:           #ECAD25;   /* 23x — brand accent: CTAs, icons, stat card, socials */

  --surface:        #FFFFFF;   /* page background */
  --surface-2:      #F6F6F6;   /*  8x — card fill (Why Choose Us, Services) */
  --surface-3:      #F7F7F9;   /*  4x */
  --warm:           #EDE8E6;   /*  4x — warm neutral section background */

  --line:           #E7E7E7;   /*  3x — hairline dividers (stats row) */
  --line-2:         #E3E3E3;   /*  2x */
  --slate:          #4B5162;   /*  3x */

  /* on-dark */
  --on-dark:        #FFFFFF;
  --on-dark-muted:  rgba(255,255,255,.72);

  /* ---------- type ------------------------------------------------------ */

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Poppins metrics used for derivation: cap 0.70em, asc 0.74em, desc 0.21em */

  --fs-h1:        64px;   /* cap measured 46.0 → 65.7; 64 gives 44.8 (+AA) */
  --lh-h1:        77px;   /* baseline delta 77.0 → exactly 1.2 */

  --fs-h2:        56px;   /* cap measured 40.0 → 57.1; 56 gives 39.2 (+AA) */
  --lh-h2:        68px;   /* baseline delta 67.5–68.0 → 1.21 */

  --fs-h3:        48px;   /* NEEDS CONFIRM — measures between 48 and 52 */
  --lh-h3:        60px;   /* baseline delta 60.0 */

  --fs-body-lg:   24px;   /* hero + about paragraphs, ink 25.0 → 0.95em ≈ 25 */
  --lh-body-lg:   36px;   /* baseline delta 36.0 → exactly 1.5 */

  --fs-body:      18px;   /* NEEDS CONFIRM — card body, ink 18.5 */
  --lh-body:      22px;   /* NEEDS CONFIRM — delta 22.0; 1.22 is unusual */

  --fs-eyebrow:   18px;   /* "INSPIRED INTERIORS", cap 13.0 → 18.6 */
  --ls-eyebrow:   .47em;  /* solved from ink width: "INSPIRED INTERIORS" = 319px */

  --fs-stat:      64px;   /* "150+", digit height 44.0 → 62.9 */
  --fs-stat-label:18px;   /* "Projects Delivered", ink 18.0 */

  --w-regular:    400;
  --w-medium:     500;
  --w-semibold:   600;
  --w-bold:       700;
  --w-extrabold:  800;   /* H1 / section headings read heavier than 700 */

  /* ---------- radius ---------------------------------------------------- */
  /* from SVG rx/ry frequency */

  --r-sm:      8px;    /*  8x */
  --r-md:     12px;
  --r-lg:     20px;    /* 10x — most common; cards, images */
  --r-xl:     30px;
  --r-pill:  999px;    /* buttons, logo pills, tags */

  /* ---------- layout ---------------------------------------------------- */

  --frame:      1440px;  /* design width */
  --gutter:       64px;  /* left edge of content in the frame */
  --container:  1312px;  /* 1440 - 64*2 */

  --btn-h:        58px;  /* hero pill height, measured 451→509 */

  /* ---------- motion ---------------------------------------------------- */

  --ease:  cubic-bezier(.4, 0, .2, 1);
  --dur:   .25s;
}

/* Reduced motion: the page has five moving parts (hero carousel, logo
   marquee, projects accordion, process stepper, testimonial carousel). */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: .01ms; }
}