/* ============================================================================
   MAS BUSINESS GROUP — DESIGN TOKENS  (Premium · Brand-Blue, logo-aligned)
   ----------------------------------------------------------------------------
   Colours sampled directly from the MAS wave logo:
     bright azure  #18A8FC   ·   deep cobalt  #0060E4
   Re-theme the whole site from this one file.
   ========================================================================== */

:root {
  /* ---- Brand blues (from the logo) ------------------------------------- */
  --brand:        #0E72D6;   /* primary azure-cobalt — buttons, links       */
  --brand-2:      #28A8FC;   /* bright azure — gradient start, glows         */
  --brand-dark:   #0A54B6;   /* cobalt — hovers, accents                    */
  --brand-deep:   #06316A;   /* navy — footer, wordmark, headings           */
  --brand-soft:   #E6F2FE;   /* light azure tint band                       */
  --brand-tint:   #F2F9FF;   /* very light wash                            */

  /* ---- Accents (complement the blue) ----------------------------------- */
  --accent:       #F2762E;   /* offer / sale badges & some CTAs             */
  --accent-2:     #FB9B4F;
  --accent-dark:  #D45D17;
  --gold:         #E0A92B;   /* trust / certificate accents (used sparingly) */
  --gold-2:       #F4D27A;

  /* ---- Neutrals (cool, clean) ------------------------------------------ */
  --ink:          #15212E;   /* primary text — blue-tinted near-black       */
  --muted:        #58697A;   /* secondary text                             */
  --bg:           #FFFFFF;   /* cards / surfaces                            */
  --bg-page:      #F6FAFE;   /* cool light page canvas                      */
  --bg-soft:      #E9F2FB;   /* cool section band                          */
  --line:         #DEE9F4;   /* cool hairline border                       */
  --line-2:       #CCDBEA;

  /* ---- Status / utility ------------------------------------------------ */
  --success:      #25A565;   /* WhatsApp-style green — order CTA            */
  --success-dark: #1B7E4D;
  --danger:       #DE3B30;
  --star:         #F2A93B;

  /* ---- Category accent colours (product bento pages) ------------------- */
  --cat-home:     #0E80E6;   /* Home Care — brand blue */
  --cat-home-2:   #2BA8FC;
  --cat-health:   #1F9D55;   /* Health Care — green    */
  --cat-health-2: #46C47A;
  --cat-beauty:   #DD4E9B;   /* Beauty Care — pink     */
  --cat-beauty-2: #F177BC;

  /* ---- Gradients ------------------------------------------------------- */
  --grad-brand:   linear-gradient(135deg, #28A8FC 0%, #0E80E6 52%, #0A54B6 100%);
  --grad-dark:    linear-gradient(165deg, #0A3E86 0%, #06285C 100%);
  --grad-gold:    linear-gradient(135deg, #F4D27A 0%, #E0A92B 100%);
  --grad-accent:  linear-gradient(135deg, #FB9B4F 0%, #F2762E 100%);
  --grad-success: linear-gradient(135deg, #2DB873 0%, #1B7E4D 100%);
  --grad-page:    radial-gradient(1200px 600px at 80% -10%, #DCEEFE 0%, rgba(220,238,254,0) 60%),
                  linear-gradient(180deg, #F6FAFE 0%, #E8F2FC 100%);

  /* ---- Radii ----------------------------------------------------------- */
  --radius-sm:    12px;
  --radius:       18px;
  --radius-lg:    24px;
  --radius-xl:    34px;
  --radius-pill:  999px;

  /* ---- Elevation (navy-blue-tinted, layered) --------------------------- */
  --shadow-xs:    0 1px 2px rgba(6,40,92,.05);
  --shadow-sm:    0 2px 4px rgba(6,40,92,.04), 0 4px 14px rgba(6,40,92,.07);
  --shadow:       0 6px 16px rgba(6,40,92,.07), 0 14px 40px rgba(6,40,92,.10);
  --shadow-lg:    0 18px 40px rgba(6,40,92,.14), 0 40px 80px rgba(6,40,92,.14);
  --shadow-brand: 0 12px 28px rgba(14,114,214,.34);
  --shadow-accent:0 12px 28px rgba(242,118,46,.30);
  --ring:         0 0 0 4px rgba(40,168,252,.25);

  /* ---- Layout ---------------------------------------------------------- */
  --container:    1240px;
  --container-wide: 1360px;
  --gap:          26px;
  --header-h:     84px;

  /* ---- Fluid type scale ------------------------------------------------ */
  --fs-300:  clamp(.78rem, .76rem + .1vw, .85rem);
  --fs-400:  clamp(.92rem, .9rem  + .12vw, 1rem);
  --fs-500:  clamp(1.05rem, 1rem + .3vw, 1.25rem);
  --fs-600:  clamp(1.3rem, 1.1rem + .8vw, 1.85rem);
  --fs-700:  clamp(1.8rem, 1.35rem + 1.9vw, 2.9rem);
  --fs-800:  clamp(2.3rem, 1.6rem + 3.3vw, 4.3rem);

  /* ---- Type families --------------------------------------------------- */
  --font-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-head:    "Plus Jakarta Sans", "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* ---- Motion ---------------------------------------------------------- */
  --t-fast:  .16s cubic-bezier(.4,0,.2,1);
  --t:       .28s cubic-bezier(.4,0,.2,1);
  --t-slow:  .5s  cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}