/* ========================================================================
   Mad Shopper Design System — colors & type
   Single source of truth for visual foundations.
   ======================================================================== */

/* ---------- Fonts (Google Fonts; substitution flagged in README) -------- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ====================================================================
     PALETTE
     -------------------------------------------------------------------- */

  /* Brand — sampled from the mascot */
  --ms-magenta:        #E0106A;   /* primary CTA, links, brand */
  --ms-magenta-600:    #C40E5C;   /* hover */
  --ms-magenta-700:    #A30B4B;   /* press */
  --ms-magenta-100:    #FFD9E7;   /* tint backgrounds */
  --ms-magenta-50:     #FFF0F6;   /* faintest tint */

  --ms-coral:          #F04500;   /* secondary, energy accents */
  --ms-coral-600:      #D43E00;
  --ms-coral-100:      #FFD9C4;

  --ms-aubergine:      #2E0820;   /* deep brand — text, dark surfaces */
  --ms-aubergine-800:  #44132F;
  --ms-aubergine-600:  #5C2748;

  --ms-lime:           #7AD75E;   /* success, eco/refurbished signal */
  --ms-lime-600:       #5BB840;
  --ms-lime-100:       #E2F7D8;

  --ms-grape:          #7A3A78;   /* playful accent */
  --ms-grape-100:      #ECDCEB;

  --ms-sun:            #F5B400;   /* sale yellow */
  --ms-sun-100:        #FFEDB3;

  /* Neutrals — warm, aubergine-tinted (NOT gray) */
  --ms-cream:          #FBF5EC;   /* page background */
  --ms-cream-2:        #F4ECE0;   /* alt surfaces, table stripes */
  --ms-paper:          #FFFFFF;   /* card surface */
  --ms-line:           #E6D5D5;   /* hairline borders */
  --ms-line-2:         #D4BFC0;   /* stronger dividers */
  --ms-mute:           #8A6F75;   /* muted body text */
  --ms-text:           #2E0820;   /* default body text = aubergine */
  --ms-text-soft:      #5C2748;   /* secondary text */

  /* Semantic */
  --ms-success:        var(--ms-lime-600);
  --ms-success-bg:     var(--ms-lime-100);
  --ms-warning:        var(--ms-sun);
  --ms-warning-bg:     var(--ms-sun-100);
  --ms-danger:         var(--ms-coral-600);
  --ms-danger-bg:      var(--ms-coral-100);
  --ms-info:           var(--ms-grape);
  --ms-info-bg:        var(--ms-grape-100);

  /* Foreground / background aliases (fg1, fg2, etc.) */
  --fg-1:              var(--ms-aubergine);   /* primary text */
  --fg-2:              var(--ms-text-soft);   /* secondary text */
  --fg-3:              var(--ms-mute);        /* tertiary / placeholder */
  --fg-on-brand:       var(--ms-cream);       /* text on magenta/aubergine */
  --bg-1:              var(--ms-cream);       /* page */
  --bg-2:              var(--ms-paper);       /* card */
  --bg-3:              var(--ms-cream-2);     /* alt */

  /* ====================================================================
     TYPE
     -------------------------------------------------------------------- */
  --font-display: 'Bricolage Grotesque', ui-serif, Georgia, serif;
  --font-body:    'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — modular ~1.2 */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;
  --text-4xl:   64px;
  --text-5xl:   84px;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ====================================================================
     SPACING (4-px base)
     -------------------------------------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ====================================================================
     RADII
     -------------------------------------------------------------------- */
  --radius-1:    6px;
  --radius-2:    12px;
  --radius-3:    20px;
  --radius-4:    28px;
  --radius-pill: 999px;

  /* ====================================================================
     SHADOWS — warm, aubergine-tinted
     -------------------------------------------------------------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(46, 8, 32, 0.06), 0 2px 8px rgba(46, 8, 32, 0.04);
  --shadow-2: 0 2px 4px rgba(46, 8, 32, 0.08), 0 8px 20px rgba(46, 8, 32, 0.08);
  --shadow-3: 0 4px 8px rgba(46, 8, 32, 0.10), 0 16px 40px rgba(46, 8, 32, 0.12);
  --shadow-4: 0 8px 16px rgba(46, 8, 32, 0.12), 0 32px 80px rgba(46, 8, 32, 0.18);
  --shadow-focus: 0 0 0 3px rgba(224, 16, 106, 0.35);

  /* Brand signature gradient (use sparingly — only the SALE badge) */
  --gradient-sale: linear-gradient(45deg, var(--ms-magenta) 0%, var(--ms-coral) 100%);

  /* ====================================================================
     MOTION
     -------------------------------------------------------------------- */
  --ease-pop:    cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    180ms;
  --dur-mid:     280ms;
  --dur-slow:    480ms;
}

/* ========================================================================
   SEMANTIC TYPE TOKENS
   -- Use h1/h2/p/etc as bare elements OR apply the .ms-h1 class.
   ======================================================================== */

html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-1); }
body { margin: 0; font-size: var(--text-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }

.ms-display, h1, .ms-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

.ms-hero {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-5xl);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--fg-1);
  margin: 0;
}

h2, .ms-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h3, .ms-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  margin: 0;
}

h4, .ms-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  margin: 0;
}

p, .ms-p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}

.ms-lead {
  font-size: var(--text-md);
  color: var(--fg-2);
  line-height: var(--lh-loose);
}

.ms-small, small {
  font-size: var(--text-sm);
  color: var(--fg-2);
}

.ms-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ms-magenta);
}

.ms-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.ms-price--big {
  font-size: var(--text-3xl);
}

.ms-price--was {
  color: var(--fg-3);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  font-weight: 500;
}

code, .ms-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: var(--radius-1);
}