/* ─────────────────────────────────────────────────────────────
   momoGood — Colors & Type
   Source: momoGood brand guidelines 2026 (Figma, 20.03.2026)
   ───────────────────────────────────────────────────────────── */

/* === FONTS ======================================================
   Outfit        — Display (hero, giant numbers). Bold 700 / SemiBold 600
   Work Sans     — Everything else: body, headings, UI, captions, forms.
                   Regular 400 / Medium 500 / SemiBold 600 / Bold 700
   General Sans  — Accent display in product screens (Medium 500).
                   Hosted on Fontshare, not Google Fonts — see note.

   Outfit + Work Sans loaded from Google Fonts (variable fonts, full range).
   General Sans loaded from Fontshare — not on Google Fonts.
================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap");

:root {
  /* ============ CORE BRAND COLORS ============ */
  /* Primary neutrals */
  --mg-night-sky:     #2D2C3E;   /* Core brand ink — text, logo, dark surfaces */
  --mg-pure-white:    #FFFFFF;
  --mg-black:         #000000;

  /* Primary accents */
  --mg-crimson-berry: #A4275E;   /* Main accent — CTAs, links, data highlights */
  --mg-salmon:        #FC5C50;   /* Secondary accent — warmth, energy, gradient top */
  --mg-dark-violet:   #4D2652;   /* Deep accent — primary button bg in product */

  /* Supporting neutrals */
  --mg-cream:         #F3F2E6;   /* Warm off-white — dark-on-light alt bg, text on dark */
  --mg-off-white:     #F8F9F8;   /* Very light fill — surface / card bg */
  --mg-gray-100:      #F5F5F5;
  --mg-gray-200:      #E3E3E3;
  --mg-gray-300:      #D9D9D9;
  --mg-gray-400:      #B3B3B3;
  --mg-gray-500:      #757575;
  --mg-gray-600:      #6B6B6B;
  --mg-gray-700:      #545454;
  --mg-gray-800:      #3E3E3E;
  --mg-gray-900:      #1E1E1E;

  /* Semantic / utility */
  --mg-link:          #1D9BF0;   /* Links, some info badges */
  --mg-success:       #2E7D5B;   /* Not in guidelines — harmonized match */
  --mg-warning:       #E4A93C;
  --mg-danger:        #FC5C50;   /* Reuses salmon */

  /* Gradients */
  --mg-gradient-heat:   linear-gradient(180deg, #FC5C50 0%, #A4275E 100%);    /* Salmon → Crimson */
  --mg-gradient-dusk:   linear-gradient(180deg, #A4275E 0%, #2D2C3E 100%);    /* Crimson → Night Sky */
  --mg-gradient-heat-r: linear-gradient(135deg, #FC5C50 0%, #A4275E 100%);
  --mg-gradient-dusk-r: linear-gradient(135deg, #A4275E 0%, #2D2C3E 100%);

  /* ============ SEMANTIC TOKENS ============ */
  --color-bg:           var(--mg-pure-white);
  --color-bg-alt:       var(--mg-off-white);
  --color-bg-warm:      var(--mg-cream);
  --color-bg-inverse:   var(--mg-night-sky);

  --color-surface:      var(--mg-pure-white);
  --color-surface-alt:  var(--mg-off-white);

  --color-fg:           var(--mg-night-sky);
  --color-fg-muted:     var(--mg-gray-600);
  --color-fg-subtle:    var(--mg-gray-400);
  --color-fg-inverse:   var(--mg-pure-white);
  --color-fg-warm-inverse: var(--mg-cream);

  --color-accent:       var(--mg-crimson-berry);
  --color-accent-hot:   var(--mg-salmon);
  --color-accent-deep:  var(--mg-dark-violet);

  --color-border:       var(--mg-gray-300);
  --color-border-subtle:var(--mg-gray-200);
  --color-border-strong:var(--mg-night-sky);

  /* ============ TYPE FAMILIES ============ */
  --font-display: "Outfit", "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-ui:      "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-alt:     "General Sans", "Work Sans", ui-sans-serif, system-ui, sans-serif;

  /* ============ TYPE SCALE (matches Figma) ============ */
  --fs-display-xl: 128px;   /* Outfit Bold — hero billboard */
  --fs-display-lg: 70px;    /* Outfit SemiBold — big headline */
  --fs-display-md: 64px;    /* Outfit Bold */
  --fs-display-sm: 60px;    /* Outfit SemiBold */

  --fs-h1:  36px;           /* General Sans Medium / Outfit SemiBold */
  --fs-h2:  32px;           /* Outfit SemiBold */
  --fs-h3:  24px;           /* Work Sans Bold / SemiBold */
  --fs-h4:  18px;

  --fs-body-lg: 18px;
  --fs-body:    16px;       /* Work Sans Regular — default */
  --fs-body-sm: 14px;
  --fs-caption: 13px;       /* Work Sans — UI meta */
  --fs-micro:   11.5px;     /* Very small badges */

  /* ============ WEIGHTS ============ */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ============ LINE HEIGHTS ============ */
  --lh-tight:  1.1;         /* Headings */
  --lh-snug:   1.2;         /* Display at 36px */
  --lh-body:   1.4;         /* Body default */
  --lh-loose:  1.6;         /* Long-form reading */

  /* ============ TRACKING ============ */
  --ls-display: -0.03em;    /* -3% on display */
  --ls-heading: -0.01em;
  --ls-body:     0;
  --ls-caption:  0.02em;

  /* ============ SPACING (8pt base, 4pt half-steps) ============ */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   80px;
  --sp-10:  100px;
  --sp-11:  128px;

  /* ============ RADII ============ */
  --radius-xs:   4px;
  --radius-sm:   8px;       /* Default button / input */
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  30px;      /* Large hero cards */
  --radius-pill: 999px;

  /* ============ SHADOWS ============ */
  --shadow-xs:  0 1px 2px rgba(45, 44, 62, 0.06);
  --shadow-sm:  0 2px 6px rgba(45, 44, 62, 0.08);
  --shadow-md:  0 6px 20px rgba(45, 44, 62, 0.10);
  --shadow-lg:  0 20px 40px rgba(45, 44, 62, 0.14);
  --shadow-focus: 0 0 0 3px rgba(164, 39, 94, 0.25);

  /* ============ MOTION ============ */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.1, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;
  --dur-breath: 3600ms;     /* Subtle "breath / heartbeat" motion referenced in guidelines */
}

/* === SEMANTIC TEXT STYLES ====================================== */

html, body {
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
  color:       var(--color-fg);
  background:  var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mg-display-xl,
.mg-display-lg,
.mg-display-md,
.mg-display-sm {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--color-fg);
}
.mg-display-xl { font-size: var(--fs-display-xl); }
.mg-display-lg { font-size: var(--fs-display-lg); font-weight: var(--fw-semibold); }
.mg-display-md { font-size: var(--fs-display-md); }
.mg-display-sm { font-size: var(--fs-display-sm); font-weight: var(--fw-semibold); }

h1, .mg-h1 {
  font-family: var(--font-alt);  /* General Sans in product headers */
  font-weight: var(--fw-medium);
  font-size:   var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color:       var(--color-accent-deep);
}

h2, .mg-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size:   var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  color:       var(--color-fg);
}

h3, .mg-h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size:   var(--fs-h3);
  line-height: var(--lh-tight);
  color:       var(--color-fg);
}

h4, .mg-h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size:   var(--fs-h4);
  line-height: var(--lh-snug);
}

p, .mg-body {
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
  color:       var(--color-fg);
  text-wrap:   pretty;
}

.mg-lede {
  font-family: var(--font-body);
  font-size:   var(--fs-body-lg);
  line-height: var(--lh-loose);
  color:       var(--color-fg);
}

.mg-caption {
  font-family: var(--font-ui);
  font-size:   var(--fs-caption);
  letter-spacing: var(--ls-caption);
  color:       var(--color-fg-muted);
}

.mg-micro {
  font-family: var(--font-ui);
  font-size:   var(--fs-micro);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.mg-ui {
  font-family: var(--font-ui);
  font-size:   var(--fs-body);
  line-height: 1;
}

.mg-quote {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size:   var(--fs-display-sm);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
}

.mg-link {
  color: var(--color-accent);
  text-decoration-color: color-mix(in oklab, var(--color-accent) 40%, transparent);
  text-underline-offset: 0.15em;
  transition: color var(--dur-fast) var(--ease-out);
}
.mg-link:hover { color: var(--color-accent-deep); }

/* === "BREATH" MOTION ========================================
   Referenced in brand guidelines as the signature ambient motion
   on gradient backgrounds. Subtle scale + hue shift, long loop. */
@keyframes mg-breath {
  0%, 100% { transform: scale(1);    filter: saturate(1) brightness(1); }
  50%      { transform: scale(1.03); filter: saturate(1.1) brightness(1.04); }
}
.mg-breath { animation: mg-breath var(--dur-breath) var(--ease-in-out) infinite; }