/* ============================================================
   Pretty Rare Boutique — Colors & Typography
   Palette: blush pink, ink black, off-white.
   No gold, no cream, no champagne.
   Accent motif: diamond (♦/◇), replacing gold-dot accents.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Pinyon+Script&display=swap');

:root {
  /* ---------- BLUSH (the signature) ---------- */
  --pr-blush-50:  #FBEEF1;
  --pr-blush-100: #F5E2E8;   /* page bg, matches logo */
  --pr-blush-200: #EFD0D8;
  --pr-blush-300: #E7B9C5;
  --pr-blush-400: #DC9CAD;
  --pr-blush-500: #C57084;   /* deep blush accent */
  --pr-blush-600: #9F4D62;

  /* ---------- OFF-WHITE / WHITE ---------- */
  --pr-off-100: #FBEEF1;   /* "off-white" is a faint pink, matches blush-50 */
  --pr-off-200: #F1E1E6;
  --pr-off-300: #E8D2D9;
  --pr-white:   #FFFFFF;

  /* ---------- INK (black) ---------- */
  --pr-ink:        #0B0B0B;   /* near-black, primary text and ink button fill */
  --pr-ink-soft:   #2A2A2A;
  --pr-ink-muted:  #6A6864;
  --pr-ink-faint:  #B8B3AE;

  /* ---------- HAIRLINES ---------- */
  --pr-hairline:      rgba(11, 11, 11, 0.10);
  --pr-hairline-soft: rgba(11, 11, 11, 0.06);
  --pr-hairline-pink: rgba(199, 111, 126, 0.45);

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:            #FBF7F8;                /* calming warm white, hint of pink */
  --bg-alt:        #FBF7F8;
  --surface:       var(--pr-white);
  --surface-alt:   var(--pr-blush-50);
  --surface-deep:  var(--pr-blush-100);

  --fg:            var(--pr-ink);
  --fg-soft:       var(--pr-ink-soft);
  --fg-muted:      var(--pr-ink-muted);
  --fg-faint:      var(--pr-ink-faint);
  --fg-on-dark:    var(--pr-off-100);

  --accent:        var(--pr-blush-500);
  --accent-hover:  var(--pr-blush-600);
  --accent-soft:   var(--pr-blush-200);

  --border:        var(--pr-hairline);
  --border-soft:   var(--pr-hairline-soft);
  --border-pink:   var(--pr-hairline-pink);
  --border-gold:   var(--pr-hairline-pink);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display:  'Jost', 'Helvetica Neue', system-ui, sans-serif;
  --font-serif:    'Jost', 'Helvetica Neue', system-ui, sans-serif;
  --font-sans:     'Jost', 'Helvetica Neue', system-ui, sans-serif;
  --font-script:   'Pinyon Script', cursive;

  /* ---------- TYPE SCALE ---------- */
  --fs-hero:    clamp(56px, 8vw, 120px);
  --fs-display: clamp(40px, 5vw, 72px);
  --fs-h1:      clamp(32px, 3.6vw, 52px);
  --fs-h2:      clamp(26px, 2.6vw, 38px);
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-meta:    12px;
  --fs-eyebrow: 11px;

  /* ---------- 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 ---------- */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (soft, warm pink) ---------- */
  --shadow-xs: 0 1px 2px rgba(120, 70, 80, 0.04);
  --shadow-sm: 0 4px 16px rgba(120, 70, 80, 0.06);
  --shadow-md: 0 8px 32px rgba(120, 70, 80, 0.08);
  --shadow-lg: 0 24px 60px rgba(120, 70, 80, 0.12);
  --shadow-glow: 0 0 60px rgba(247, 225, 228, 0.7);

  /* ---------- MOTION ---------- */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  180ms;
  --dur-med:   320ms;
  --dur-slow:  600ms;
}

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC TYPE CLASSES (unchanged signatures)
   ============================================================ */
.pr-hero,
.pr-display {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--fg);
  text-wrap: balance;
}
.pr-hero    { font-size: var(--fs-hero); }
.pr-display { font-size: var(--fs-display); }

.pr-h1, .pr-h2, .pr-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--fg);
  text-wrap: balance;
}
.pr-h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; }
.pr-h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.025em; }
.pr-h3 { font-size: var(--fs-h3); line-height: 1.3;  letter-spacing: -0.015em; }
.pr-h4 { font-family: var(--font-sans); font-size: var(--fs-h4); line-height: 1.35; font-weight: 500; }

.pr-italic { font-style: italic; font-weight: 300; }

.pr-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.pr-body  { font-size: var(--fs-body);  line-height: 1.65; color: var(--fg-soft); }
.pr-lead  { font-size: 18px; line-height: 1.6; color: var(--fg-soft); font-weight: 300; }
.pr-small { font-size: var(--fs-small); line-height: 1.5;  color: var(--fg-muted); }
.pr-meta  { font-size: var(--fs-meta);  letter-spacing: 0.06em; color: var(--fg-muted); }

.pr-quote {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--fg);
}

.pr-button-label {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}

.pr-wordmark {
  font-family: var(--font-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
}