/* ============================================================
   MIDDLE SOLUTIONS LTD — Design Tokens
   Colours + Type foundations
   Brand palette: Purple #6651E3 · Lime #9DF62C · Ink black
   Import this first; site.css consumes these variables.
   ============================================================ */

/* Poppins — brand typeface (heavy geometric grotesque, like the logo) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* ---- Brand colours (purple + lime) ------------------------ */
  --ms-navy:        #181427;  /* ink / dark brand (near-black)   */
  --ms-navy-700:    #2c2456;  /* gradient inner glow             */
  --ms-navy-900:    #100d1e;  /* deepest ink / footer shade      */
  --ms-blue:        #6651e3;  /* PRIMARY purple / CTA            */
  --ms-blue-deep:   #5640d4;  /* purple hover / secondary        */
  --ms-orange:      #4a39b5;  /* deep-purple tertiary accent     */
  --ms-green:       #9df62c;  /* lime accent / action            */
  --ms-green-ink:   #1d3a07;  /* readable text on lime           */
  --ms-yellow:      #9df62c;  /* star / rating (lime)            */

  /* ---- Neutrals --------------------------------------------- */
  --ms-ink:         #14101e;  /* darkest text                    */
  --ms-slate:       #4b4860;  /* body copy (cool slate)          */
  --ms-slate-soft:  #6c6982;  /* muted copy                      */
  --ms-grey:        #908da6;  /* captions                        */
  --ms-ice:         #ddd8f7;  /* light text on purple / ink      */
  --ms-line:        #e9e7f1;  /* hairline borders (cool)         */
  --ms-card:        #f4f3fa;  /* neutral card fill               */
  --ms-bg:          #ffffff;  /* page background                 */
  --ms-bg-soft:     #f7f6fc;  /* sectioned background            */

  /* ---- Surfaces & gradients --------------------------------- */
  --ms-hero-grad:   radial-gradient(120% 130% at 50% 0%, var(--ms-navy-700) 0%, var(--ms-navy) 62%);
  --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.3rem, 1.3rem + 4vw, 4rem);      /* @kind spacing */
  --ms-h1:       clamp(2rem, 1.4rem + 2.6vw, 3rem);       /* @kind spacing */
  --ms-h2:       clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem);  /* @kind spacing */
  --ms-h3:       clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);  /* @kind spacing */
  --ms-h4:       clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); /* @kind spacing */
  --ms-lead:     clamp(1.02rem, 0.95rem + 0.35vw, 1.18rem); /* @kind spacing */
  --ms-body:     1.0625rem;   /* @kind spacing */
  --ms-small:    0.875rem;    /* @kind spacing */
  --ms-tiny:     0.78rem;     /* @kind spacing */

  /* Weights */
  --ms-w-light: 300;  /* @kind font */
  --ms-w-reg:   400;  /* @kind font */
  --ms-w-med:   500;  /* @kind font */
  --ms-w-semi:  600;  /* @kind font */
  --ms-w-bold:  700;  /* @kind font */
  --ms-w-black: 800;  /* @kind font */

  /* ---- Radii ------------------------------------------------- */
  --ms-r-xs:  8px;    /* 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(24,20,39,.06), 0 1px 3px rgba(24,20,39,.05);
  --ms-shadow-md:  0 8px 24px rgba(24,20,39,.09);
  --ms-shadow-lg:  0 24px 60px rgba(24,20,39,.14);
  --ms-shadow-blue: 0 18px 40px rgba(102,81,227,.30);
  --ms-shadow-orange: 0 16px 36px rgba(102,81,227,.22);
  --ms-shadow-green: 0 18px 40px rgba(157,246,44,.40);

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

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