/* ============================================================
   MIDLANDS SOLUTIONS LTD — Design Tokens
   Colours + Type foundations (derived from the Figma layout)
   Import this first; site.css consumes these variables.
   ============================================================ */

/* Poppins — brand typeface (Figma uses Poppins throughout) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---- Brand colours (burgundy + gold heritage palette) ----- */
  --ms-navy:        #4a1018;  /* primary brand wine / dark     */
  --ms-navy-700:    #7d1f2b;  /* radial-gradient inner glow    */
  --ms-navy-900:    #2a0a0e;  /* deepest wine / footer shade   */
  --ms-blue:        #c0392b;  /* primary accent / primary CTA  */
  --ms-blue-deep:   #9c2a22;  /* secondary crimson             */
  --ms-orange:      #e0a13a;  /* gold accent / highlight       */
  --ms-green:       #2e7d6b;  /* teal — reliability tertiary   */
  --ms-yellow:      #f5c542;  /* star / rating gold            */

  /* ---- Neutrals --------------------------------------------- */
  --ms-ink:         #2a0a0e;  /* darkest text                  */
  --ms-slate:       #574a4c;  /* body copy (warm slate)        */
  --ms-slate-soft:  #756a6c;  /* muted copy                    */
  --ms-grey:        #938d8e;  /* captions                      */
  --ms-ice:         #f4ddd2;  /* light text on wine            */
  --ms-line:        #ece4e2;  /* hairline borders (warm)       */
  --ms-card:        #f5f1ef;  /* neutral card fill             */
  --ms-bg:          #ffffff;  /* page background               */
  --ms-bg-soft:     #faf6f4;  /* sectioned background (warm)   */

  /* ---- Surfaces & gradients --------------------------------- */
  --ms-hero-grad:   radial-gradient(120% 130% at 50% 0%, var(--ms-navy-700) 0%, var(--ms-navy) 60%);
  --ms-footer-bg:   var(--ms-navy);

  /* ---- Typography ------------------------------------------- */
  --ms-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Base type scale (fluid) */
  --ms-display:  clamp(2.2rem, 1.4rem + 3.4vw, 3.5rem);   /* hero headline   */
  --ms-h1:       clamp(2rem, 1.4rem + 2.6vw, 3rem);       /* page heading    */
  --ms-h2:       clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem);  /* section heading */
  --ms-h3:       clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);  /* card heading    */
  --ms-h4:       clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); /* sub heading     */
  --ms-lead:     clamp(1.02rem, 0.95rem + 0.35vw, 1.18rem);
  --ms-body:     1.0625rem;   /* 17px */
  --ms-small:    0.875rem;    /* 14px */
  --ms-tiny:     0.78rem;     /* ~12.5px */

  /* Weights */
  --ms-w-light: 300;
  --ms-w-reg:   400;
  --ms-w-med:   500;
  --ms-w-semi:  600;
  --ms-w-bold:  700;

  /* ---- Radii ------------------------------------------------- */
  --ms-r-xs:  5px;    /* buttons / inputs       */
  --ms-r-sm:  12px;   /* small cards            */
  --ms-r-md:  18px;   /* cards                  */
  --ms-r-lg:  28px;   /* large panels           */
  --ms-r-xl:  40px;   /* footer / hero rounding */
  --ms-r-pill: 50px;  /* badges / chips         */

  /* ---- Shadows / elevation ---------------------------------- */
  --ms-shadow-sm:  0 1px 2px rgba(1,14,55,.06), 0 1px 3px rgba(1,14,55,.05);
  --ms-shadow-md:  0 8px 24px rgba(1,14,55,.08);
  --ms-shadow-lg:  0 24px 60px rgba(1,14,55,.12);
  --ms-shadow-blue: 0 18px 40px rgba(192,57,43,.28);
  --ms-shadow-orange: 0 18px 40px rgba(224,161,58,.32);

  /* ---- Spacing rhythm --------------------------------------- */
  --ms-section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --ms-gap:       clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  --ms-maxw:      1200px;

  /* ---- Motion ----------------------------------------------- */
  --ms-ease: cubic-bezier(.22,.61,.36,1);
  --ms-ease-out: cubic-bezier(.16,1,.3,1);
}