/* =========================================================================
   Boozyshop — Colors & Type
   Aligned to the official Boozyshop Brand Guide (English edition).

   Names follow the brand-guide naming with a `--bz-` prefix:
     Pink Glam · Cotton Cream · Velvet Candy · Blush Candy ·
     Dreamy Lilac · Peach Gloss · Aqua Glaze · BS Black

   Each secondary color comes in three levels:
     --bz-<name>           solid
     --bz-<name>-soft      tint (used for backgrounds with text)
     --bz-<name>-contrast  contrast (used for text on the soft tint)

   Casing rules from the guide:
     • Headings, titles, subtitles → Capital first letter (sentence case)
     • CTAs, action buttons, handwritten (Amibata) → lowercase
   ========================================================================= */

/* ----- Fonts ----------------------------------------------------------- */
/* Brand fonts:
     • Display / imagery   Mendl Sans Dusk Bold     →  shipped locally ✓
     • Playful accent       Amibata Regular          →  shipped locally ✓
     • Body / UI            Rubik SemiBold + Light   →  Rubik (Google Fonts — exact)
   System fallbacks per guide: Helvetica Bold + Helvetica Light. */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');

@font-face {
  font-family: 'Mendl Sans Dusk';
  src: url('fonts/mendl-sans-dusk.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mendl Sans Dusk';
  src: url('fonts/mendl-sans-dusk-bold.otf') format('opentype');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Amibata';
  src: url('fonts/Amibata.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Primary colors (brand guide §2.1) ---------- */
  --bz-pink-glam:        #ff287d;   /* BS Pink Glam — THE Boozyshop pink */
  --bz-cotton-cream:     #f8f1f3;   /* BS Cotton Cream — softer alternative to white */
  --bz-white:            #ffffff;

  /* Print PMS — 213 C / 806 C (neon basic) */

  /* ---------- Secondary colors (brand guide §2.2) ---------- */
  /* Velvet Candy — RESERVED for CTAs only */
  --bz-velvet-candy:          #740193;
  /* (no soft/contrast — Velvet Candy is solid only) */

  /* Body text */
  --bz-black:                 #1c1517;

  /* Blush Candy — soft pink. NB: contrast == solid (per guide) */
  --bz-blush-candy:           #f5b1d0;
  --bz-blush-candy-soft:      #f8dceb;
  --bz-blush-candy-contrast:  #d3988b;

  /* Dreamy Lilac */
  --bz-dreamy-lilac:          #c8badc;
  --bz-dreamy-lilac-soft:     #e6daed;
  --bz-dreamy-lilac-contrast: #bba5dc;

  /* Peach Gloss */
  --bz-peach-gloss:           #fac692;
  --bz-peach-gloss-soft:      #ffedbc;
  --bz-peach-gloss-contrast:  #ffba82;

  /* Aqua Glaze */
  --bz-aqua-glaze:            #b6dedf;
  --bz-aqua-glaze-soft:       #d8edeb;
  --bz-aqua-glaze-contrast:   #91cdcb;

  /* ---------- Convenience aliases ---------- */
  --bz-pink:                  var(--bz-pink-glam);    /* shorthand */

  /* ---------- Semantic roles ---------- */
  --bg:                  var(--bz-white);
  --bg-soft:             var(--bz-cotton-cream);
  --fg:                  var(--bz-black);
  --fg-muted:            #5a4f52;
  --fg-soft:             #998c92;

  --accent:              var(--bz-pink-glam);
  --accent-hover:        #e8156a;

  --cta-pink:            var(--bz-pink-glam);
  --cta-purple:          var(--bz-velvet-candy);     /* Velvet Candy CTAs */
  --cta-text:            var(--bz-cotton-cream);     /* "text in Cotton Cream" */

  --sale:                var(--bz-pink-glam);
  --new:                 var(--bz-velvet-candy);
  --trend:               var(--bz-peach-gloss-soft);

  --border:              #ece4e9;
  --divider:             #f1e9ee;

  /* ---------- Typography ---------- */
  --font-display:        'Mendl Sans Dusk', 'Helvetica Neue', Helvetica, sans-serif;   /* brand display */
  --font-script:         'Amibata', 'Brush Script MT', cursive;                         /* brand playful accent */
  --font-body:           'Rubik', 'Helvetica Neue', Helvetica, system-ui, sans-serif;

  /* Type scale (guide-anchored: H 45pt · intro 13pt · body 10pt; scaled to web) */
  --t-xs:    11px;
  --t-sm:    13px;
  --t-base:  15px;
  --t-md:    17px;
  --t-lg:    20px;
  --t-xl:    24px;
  --t-2xl:   32px;
  --t-3xl:   40px;
  --t-4xl:   56px;
  --t-5xl:   72px;
  --t-6xl:   96px;

  /* Line spacing per guide:
       Headline  Mendl Sans Dusk Bold  → 0.82 × font-size
       Intro     Rubik Light           → 1.3  × font-size
       Heading   Rubik SemiBold        → 1.5  × font-size
       Body      Rubik Light           → 1.5  × font-size */
  --lh-display:  0.82;
  --lh-intro:    1.3;
  --lh-body:     1.5;

  --tracking-display: -0.01em;
  --tracking-body:    0em;

  /* ---------- Spacing ---------- */
  --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 ---------- */
  /* The glow shape uses a 'rounded inverse corner' — see assets/glow-shape.svg.
     Standard cards use big rounded corners (24–48px). */
  --r-xs:     6px;
  --r-sm:     10px;
  --r-md:     16px;
  --r-lg:     24px;
  --r-xl:     32px;
  --r-2xl:    48px;
  --r-pill:   999px;
  --r-diamond-corner: 22px;   /* applied to a rotate(45deg) square */

  /* ---------- Shadows ---------- */
  --shadow-xs:   0 1px 2px rgba(116, 1, 147, 0.04);
  --shadow-sm:   0 2px 8px rgba(116, 1, 147, 0.06);
  --shadow-md:   0 8px 24px rgba(255, 40, 125, 0.10);
  --shadow-lg:   0 20px 48px rgba(116, 1, 147, 0.12);
  --shadow-pop:  0 12px 32px rgba(255, 40, 125, 0.22);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
}

/* =========================================================================
   Element defaults
   ========================================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 300;          /* Rubik Light is the body default */
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headlines — Mendl Sans Dusk Bold.
   PER GUIDE: headings start with a Capital letter. (Sentence case, not lowercase.) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--bz-pink-glam);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 { font-size: var(--t-5xl); }
h2 { font-size: var(--t-4xl); }
h3 { font-size: var(--t-3xl); }
h4 { font-size: var(--t-2xl); }
h5 { font-size: var(--t-xl); color: var(--fg); }
h6 { font-size: var(--t-md); color: var(--fg); }

/* Intro paragraph — Rubik Light at lh 1.3, slightly larger than body */
.intro {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--t-md);
  line-height: var(--lh-intro);
  color: var(--fg);
}

p {
  margin: 0 0 var(--space-4);
  color: var(--fg);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

/* Headings within body text — Rubik SemiBold per guide */
.body-heading {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0 0 var(--space-2);
}

small, .t-small { font-size: var(--t-sm); color: var(--fg-muted); }

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

/* Script accent — Amibata. Always lowercase, slight rotation per guide §3.4. */
.script {
  font-family: var(--font-script);
  color: var(--bz-pink-glam);
  display: inline-block;
  transform: rotate(-15deg);
}

/* CTA labels — per guide §2.2, action buttons do NOT use capital letters. */
.cta-label { text-transform: lowercase; letter-spacing: 0; }