/* ==========================================================================
   Mpower U Wellness: design tokens (source: Brand Kit)
   Change fonts or colours here only.
   ========================================================================== */

/* ---- Fonts (Avenir; licence to be confirmed by the client before public launch) ---- */
@font-face { font-family: "Avenir"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/avenir-light.woff2") format("woff2"); }
@font-face { font-family: "Avenir"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/avenir-regular.woff2") format("woff2"); }
@font-face { font-family: "Avenir"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/avenir-medium.woff2") format("woff2"); }
@font-face { font-family: "Gotu"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/gotu-regular.woff2") format("woff2"); } /* OFL, logo wordmark only */
@font-face { font-family: "Avenir"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/avenir-heavy.woff2") format("woff2"); }

:root {
	/* ---- Colour: primary ---- */
	--mu-deep-teal: #265C7B;
	--mu-turquoise: #55A69F;
	--mu-aqua:      #8DCCD4;
	--mu-gold:      #CCA058;

	/* ---- Colour: secondary ---- */
	--mu-ivory: #F7F3EA;   /* main background */
	--mu-sand:  #E6D8C4;   /* editorial sections, soft cards */
	--mu-stone: #D9DDD8;   /* secondary backgrounds, dividers */
	--mu-slate: #24363A;   /* body text, headings, UI */
	--mu-white: #FFFFFF;

	/* ---- Colour: derived (tints used for hover/borders; contrast-checked on use) ---- */
	--mu-deep-teal-dark: #1D4A63;                 /* hover on deep teal (white text 9.5:1) */
	--mu-teal-tint:      rgba(38, 92, 123, 0.08);
	--mu-border:         rgba(36, 54, 58, 0.14);
	--mu-focus:          #265C7B;

	/* ---- Colour roles ---- */
	--mu-bg:        var(--mu-ivory);
	--mu-text:      var(--mu-slate);
	--mu-heading:   var(--mu-deep-teal);
	--mu-link:      var(--mu-deep-teal);

	/* ---- Typography ---- */
	--mu-font-heading: "Avenir", "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--mu-font-body:    "Avenir", "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--mu-font-logo:    "Gotu", Georgia, serif;           /* wordmark only (inside the logo file) */

	--mu-weight-light:   300;
	--mu-weight-regular: 400;
	--mu-weight-medium:  500;
	--mu-weight-heading: 800;                            /* brand kit "Bold": Avenir has no Bold, Heavy is closest */

	/* Fluid type scale (min, preferred, max) */
	--mu-fs-h1:    clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem);
	--mu-fs-h2:    clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem);
	--mu-fs-h3:    clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
	--mu-fs-h4:    1.25rem;
	--mu-fs-body:  clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);   /* 17-18 px */
	--mu-fs-small: 0.9375rem;                                       /* 15 px minimum for text */
	--mu-fs-label: 0.875rem;                                        /* 14 px, uppercase UI labels only */
	--mu-lh-body: 1.65;
	--mu-lh-head: 1.15;

	/* ---- Spacing ---- */
	--mu-space-1: 0.25rem;
	--mu-space-2: 0.5rem;
	--mu-space-3: 0.75rem;
	--mu-space-4: 1rem;
	--mu-space-5: 1.5rem;
	--mu-space-6: 2rem;
	--mu-space-7: 3rem;
	--mu-space-8: 4rem;
	--mu-section-y: clamp(3.25rem, 2.4rem + 3vw, 5.5rem);
	--mu-gold-text: #7A5516;                              /* gold for small text on light backgrounds (5:1) */
	--mu-gold-light: #F0DBB0;                             /* gold for small text on blue backgrounds */
	--mu-gold-soft: rgba(204, 160, 88, 0.6);              /* the one thin gold line used for dividers, cards and button borders */
	--mu-line-gold: 1px solid var(--mu-gold-soft);
	--mu-gutter:    clamp(1rem, 0.5rem + 2vw, 2rem);        /* 16px minimum side gutter */
	--mu-container: 1200px;
	--mu-container-narrow: 760px;

	/* ---- Shape & depth ---- */
	--mu-radius-s:    10px;
	--mu-radius-m:    16px;
	--mu-radius-l:    24px;
	--mu-radius-pill: 999px;
	--mu-shadow-s: 0 1px 2px rgba(38, 92, 123, 0.08), 0 2px 8px rgba(38, 92, 123, 0.06);
	--mu-shadow-m: 0 6px 24px rgba(38, 92, 123, 0.12);

	/* ---- Motion ---- */
	--mu-ease: cubic-bezier(.2, .7, .2, 1);
	--mu-dur:  200ms;

	/* ---- Interaction ---- */
	--mu-tap-min: 48px;
}