/* ============================================================
   MEGA-SWEETS — Colors & Type Foundations
   Tropical / Coastal Pastel. Sweet, whimsical, premium-approachable.
   Fonts are CLOSEST-MATCH SUBSTITUTIONS from Google Fonts (originals
   unknown) — flagged in README. Swap @import + --font-* vars when the
   real font files arrive.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Yellowtail&family=Playfair+Display:ital,wght@0,400..900;1,400..700&family=Nunito+Sans:ital,opsz,wght@0,6..12,300..900;1,6..12,400..700&family=Quicksand:wght@400..700&display=swap');

:root {
  /* ---------- BRAND CORE COLORS ---------- */
  --ms-blue:    #1A2BAE;   /* Royal/cobalt blue — primary body & structural text */
  --ms-blue-deep:#14216B;  /* Deeper navy for dense text blocks */
  --ms-teal:    #14857A;   /* Deep teal — logo, section labels ("Custom") */
  --ms-green:   #1F7A3D;   /* Forest green — prices ($30 / $42 /dozen) */
  --ms-magenta: #D81E72;   /* Raspberry magenta — emphasis, "&", featured price */
  --ms-purple:  #7E40CF;   /* Violet — secondary emphasis, "CUSTOM FLAVORS" */
  --ms-sky:     #2EA3DE;   /* Sky blue — playful headings ("PARTY", "Small") */

  /* ---------- PASTELS (from the confections) ---------- */
  --ms-lavender: #C9B6DE;
  --ms-mint:     #A6DBD2;
  --ms-pink:     #F3B9C8;
  --ms-peach:    #F6E2C9;
  --ms-skypastel:#BFE4F2;
  --ms-butter:   #FAD46A;

  /* Tinted pastel surfaces (cards / chips) */
  --ms-lavender-50: #F3EEF8;
  --ms-mint-50:     #EAF6F3;
  --ms-pink-50:     #FCEEF2;
  --ms-sky-50:      #EAF6FC;

  /* ---------- NEUTRALS ---------- */
  --ms-sand:    #F5E9DA;   /* Warm sandy page background */
  --ms-sand-2:  #FAF1E6;   /* Lighter sand */
  --ms-cream:   #FFFDF9;   /* Off-white card base */
  --ms-white:   #FFFFFF;
  --ms-ink:     #2C2A4A;   /* Neutral dark text (when blue is too loud) */
  --ms-ink-soft:#5B5876;   /* Muted body text */
  --ms-line:    #ECE3D7;   /* Hairline on sand */

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND ---------- */
  --fg1: var(--ms-blue);        /* Primary text / headings */
  --fg2: var(--ms-blue-deep);   /* Strong text */
  --fg3: var(--ms-ink-soft);    /* Secondary / muted text */
  --fg-accent: var(--ms-magenta);
  --bg1: var(--ms-sand);        /* App / page background */
  --bg2: var(--ms-cream);       /* Card background */
  --bg3: var(--ms-white);       /* Pure white surface */

  /* ---------- GRADIENTS ---------- */
  /* Hero rainbow — mirrors the logo (teal → blue → magenta → violet) */
  --grad-rainbow: linear-gradient(100deg,#14857A 0%,#2EA3DE 28%,#1A2BAE 48%,#D81E72 74%,#7E40CF 100%);
  --grad-pink-teal:   linear-gradient(90deg,#F3B9C8 0%,#2EA3DE 50%,#14857A 100%);
  --grad-purple-pink: linear-gradient(90deg,#7E40CF 0%,#D81E72 100%);
  --grad-mint-pink:   linear-gradient(90deg,#A6DBD2 0%,#F3B9C8 100%);
  /* Iridescent / holographic — for feature-icon strokes & accents */
  --grad-iridescent:  linear-gradient(110deg,#C9B6DE 0%,#BFE4F2 25%,#A6DBD2 50%,#F3B9C8 75%,#C9B6DE 100%);
  /* Soft pastel card border (thin multi-color) */
  --grad-border: linear-gradient(120deg,#C9B6DE,#BFE4F2,#A6DBD2,#F3B9C8);

  /* ---------- TYPE FAMILIES ---------- */
  --font-script: 'Yellowtail', 'Brush Script MT', cursive;          /* SUBSTITUTE for the logo brush-script */
  --font-serif:  'Playfair Display', 'Georgia', serif;              /* SUBSTITUTE — elegant high-contrast serif */
  --font-sans:   'Nunito Sans', system-ui, -apple-system, sans-serif;/* SUBSTITUTE — friendly humanist sans (body/data) */
  --font-rounded:'Quicksand', var(--font-sans);                     /* Friendly geometric — labels / chips */

  /* ---------- TYPE SCALE (rem @ 16px base) ---------- */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2.25rem;   /* 36px */
  --text-3xl:  3rem;      /* 48px */
  --text-4xl:  4rem;      /* 64px */

  /* ---------- SPACING (8pt-ish, soft) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* ---------- RADII (generous, candy-soft) ---------- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (soft, sunny — never harsh) ---------- */
  --shadow-sm: 0 2px 8px rgba(124,92,160,.10);
  --shadow-md: 0 8px 24px rgba(124,92,160,.14);
  --shadow-lg: 0 18px 48px rgba(124,92,160,.18);
  /* "Lift off the page" — for product/flavor imagery */
  --shadow-product: 0 10px 22px rgba(80,60,110,.22);
  /* Inner glow for glassy chips */
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.7);
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   ============================================================ */
.ms-logo {                       /* Brand wordmark in type (prefer the PNG asset) */
  font-family: var(--font-script);
  font-size: var(--text-4xl);
  line-height: 1;
  background: var(--grad-rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.2px #fff;
  paint-order: stroke fill;
  filter: drop-shadow(0 3px 5px rgba(80,60,110,.30));
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: var(--text-3xl);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--fg1);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.1;
  color: var(--fg1);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.15;
  color: var(--fg1);
}
.section-label {                 /* "CUSTOM FLAVORS" style — sans, spaced, caps */
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ms-purple);
}
.eyebrow {                       /* "HANDCRAFTED • SMALL BATCH" */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ms-blue);
}
.tagline {                       /* "— Perfect for celebrations —" */
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-md);
  color: var(--ms-magenta);
}
p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--fg2);
}
.body-muted { color: var(--fg3); }
.label {                         /* flavor / data labels */
  font-family: var(--font-rounded);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--ms-blue);
}
.price {                         /* big numeric price */
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
}
.price--green   { color: var(--ms-green); }
.price--magenta { color: var(--ms-magenta); }
.price--purple  { color: var(--ms-purple); }
.data-num {                      /* bold inline numbers in copy */
  font-family: var(--font-sans);
  font-weight: 800;
}
small, .small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--fg3);
}

/* Gradient text helper */
.grad-text {
  background: var(--grad-purple-pink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}