/* ============================================================
   Unicorn Lab — Colors & Type
   Foundations for the Unicorn Lab Shopify storefront and any
   throwaway prototypes built against this design system.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600;700;800;900&family=Montserrat:wght@400;500;600;700&display=swap");

:root {
  /* ---------- Brand ---------- */
  --ul-pink:           #F25EA5;   /* primary hot pink — CTA, links, accents */
  --ul-pink-700:       #D63384;   /* hover / pressed */
  --ul-pink-300:       #F8A8CC;   /* secondary fill */
  --ul-pink-100:       #FFD9E8;   /* tint, badge bg */
  --ul-pink-50:        #FFF1F7;   /* page wash, soft section bg */

  --ul-blush:          #FBE4EE;   /* announcement bar, soft cards */
  --ul-blush-deep:     #F2BFD3;   /* gradient stop, blush podium */
  --ul-blush-pale:     #FCEFF4;   /* very soft fill */

  --ul-cream:          #FBF7F4;   /* warm neutral surface */
  --ul-sand:           #F5F0EB;   /* alt warm bg from Luxury preset */

  --ul-ink:            #121212;   /* primary text + button bg */
  --ul-ink-soft:       #2A2A2A;
  --ul-graphite:       #4F4F4F;   /* body text on light */
  --ul-mute:           #7A7A7A;   /* secondary copy */
  --ul-line:           #F2CDDD;   /* delicate pink hairline */
  --ul-line-neutral:   #EDE6EA;   /* delicate neutral hairline */

  --ul-white:          #FFFFFF;
  --ul-aus-green:      #007A33;   /* Australian Made green-and-gold */
  --ul-aus-gold:       #FFB81C;
  --ul-rating:         #ECAC23;   /* judge.me star rating */
  --ul-sale:           #E50000;
  --ul-success:        #4D7C0F;
  --ul-error:          #E11D48;

  /* ---------- Semantic surfaces ---------- */
  --bg:                var(--ul-white);
  --bg-soft:           var(--ul-pink-50);
  --bg-blush:          var(--ul-blush);
  --bg-card:           var(--ul-white);
  --bg-card-pink:      var(--ul-pink-50);
  --bg-elevated:       var(--ul-white);
  --bg-announcement:   var(--ul-blush);

  --fg:                var(--ul-ink);
  --fg-muted:          var(--ul-graphite);
  --fg-faint:          var(--ul-mute);
  --fg-on-pink:        var(--ul-white);

  --border:            var(--ul-line);
  --border-soft:       var(--ul-line-neutral);
  --border-strong:     var(--ul-ink);

  --link:              var(--ul-pink-700);
  --link-hover:        var(--ul-ink);

  /* ---------- Gradients (canonical Unicorn Lab washes) ---------- */
  --grad-hero:         radial-gradient(120% 100% at 80% 30%, #F8D6E4 0%, #FBE4EE 45%, #FFF1F7 100%);
  --grad-blush:        linear-gradient(180deg, #FFF1F7 0%, #FBE4EE 100%);
  --grad-pink-pop:     linear-gradient(135deg, #F25EA5 0%, #FF8FBE 100%);
  --grad-podium:       linear-gradient(180deg, #FBE4EE 0%, #F2BFD3 100%);

  /* ---------- Typography ---------- */
  --font-display:      "Libre Franklin", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:         "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-script:       "Caveat", "Brush Script MT", cursive; /* "unicorn oil" handwritten accent */

  /* Heading rhythm — the Unicorn Lab homepage hero leans into a very
     heavy display weight with tight tracking. We expose 900 for hero,
     800 for section heads, 700 for card heads. */
  --fw-display:        900;
  --fw-heading:        800;
  --fw-strong:         700;
  --fw-medium:         500;
  --fw-body:           400;

  --lh-display:        0.98;
  --lh-heading:        1.1;
  --lh-body:           1.55;
  --lh-tight:          1.25;

  --tracking-display:  -0.02em;
  --tracking-heading:  -0.01em;
  --tracking-body:     0;
  --tracking-eyebrow:  0.14em;

  /* Type scale — fluid clamp, mobile-first */
  --fs-hero:           clamp(2.75rem, 2rem + 4vw, 5rem);     /* 44 → 80 */
  --fs-display:        clamp(2.25rem, 1.6rem + 3vw, 3.5rem); /* 36 → 56 */
  --fs-h1:             clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --fs-h2:             clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  --fs-h3:             clamp(1.25rem, 1.05rem + 1vw, 1.625rem);
  --fs-h4:             1.125rem;
  --fs-lg:             1.0625rem;
  --fs-body:           1rem;
  --fs-sm:             0.875rem;
  --fs-xs:             0.75rem;
  --fs-eyebrow:        0.6875rem; /* 11px uppercase */

  /* ---------- Spacing & radii ---------- */
  --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;

  --radius-xs:         6px;
  --radius-sm:         10px;     /* small inputs / chips */
  --radius-md:         16px;     /* product cards (curved preset) */
  --radius-lg:         24px;     /* feature cards */
  --radius-xl:         32px;     /* hero panels */
  --radius-pill:       999px;    /* buttons, badges, search */

  /* ---------- Elevation ---------- */
  --shadow-xs:         0 1px 2px rgba(31, 17, 25, 0.04);
  --shadow-sm:         0 2px 8px rgba(214, 51, 132, 0.06), 0 1px 2px rgba(31, 17, 25, 0.04);
  --shadow-md:         0 8px 24px rgba(214, 51, 132, 0.08), 0 2px 6px rgba(31, 17, 25, 0.04);
  --shadow-lg:         0 20px 50px rgba(214, 51, 132, 0.12), 0 6px 16px rgba(31, 17, 25, 0.05);
  --shadow-pink-glow:  0 12px 32px rgba(242, 94, 165, 0.28);
  --ring-pink:         0 0 0 3px rgba(242, 94, 165, 0.25);

  /* ---------- Layout ---------- */
  --container:         1530px;
  --container-padding: 30px;
  --container-narrow:  960px;
  --section-y:         clamp(48px, 6vw, 96px);

  /* ---------- Motion ---------- */
  --ease-out:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft:         cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:          150ms;
  --dur-base:          250ms;
  --dur-slow:          400ms;
}

/* ============================================================
   Base resets + semantic element styles
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

.ul-hero,
h1.ul-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

h1, .ul-h1 {
  font-weight: var(--fw-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
}

h2, .ul-h2 {
  font-weight: var(--fw-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
}

h3, .ul-h3 {
  font-weight: var(--fw-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-heading);
}

h4, .ul-h4 {
  font-weight: var(--fw-strong);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
}

.ul-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--fw-strong);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ul-pink-700);
}

/* eyebrow pill — Australian Made / status capsule */
.ul-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--ul-white);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-strong);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ul-pink-700);
  box-shadow: var(--shadow-xs);
}

/* body styles */
p { margin: 0 0 1em; }
p.ul-lead {
  font-size: var(--fs-lg);
  color: var(--fg-muted);
  max-width: 56ch;
}
small, .ul-small { font-size: var(--fs-sm); color: var(--fg-faint); }

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft);
}
a:hover { color: var(--link-hover); }

/* script accent used on bottle-label flourishes — DO NOT use for body */
.ul-script {
  font-family: var(--font-script);
  font-weight: 700;
  color: var(--ul-pink-700);
}

/* ============================================================
   Quick utility classes (sparingly used; main work happens in
   ui_kits/website/* components and inline)
   ============================================================ */

.ul-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.ul-container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.ul-section {
  padding-block: var(--section-y);
}

.ul-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}

.ul-card-pink {
  background: var(--bg-card-pink);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ul-line);
}

/* ============================================================
   Cosmetic copy guidance: "nail growth", "healthier nails",
   "stronger-looking nails" and "improving nail condition" are all
   permitted — these match the live Unicorn Lab PDPs. Avoid only
   therapeutic / disease-state language: cure, heal, repair, fix,
   treat, stop [a behaviour]. Always-on virtues: Australian Made,
   Vegan, Nut-free, 12-Free.
   ============================================================ */