/* ============================================================
   MELOGRAM — Foundations: Color + Type
   Personalized songs as a gift · melogram.ru
   Light theme ONLY. Warm, airy, gift-like.
   ------------------------------------------------------------
   Fonts loaded from Google Fonts (see @import below).
   Display : Playfair Display  (elegant, high-contrast serif)
   UI/Body : Manrope           (clean geometric sans)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- RAW COLOR TOKENS ---------- */

  /* Warm cream / milk backgrounds — never cold white */
  --cream:        #FAF7F2;   /* page base */
  --cream-soft:   #FDF9F4;   /* lighter warm panel */
  --blush-tint:   #F8EFEF;   /* faint pink-lavender section wash */
  --peach-tint:   #FBF0E8;   /* warm peach section wash */
  --lavender-tint:#F4EEF4;   /* cooler (still warm) section wash */

  /* Gold / amber — the value, the ribbon, the light */
  --gold:        #C9963A;    /* primary accent / CTA */
  --gold-light:  #E8B86D;    /* highlights, glow, gradient stop */
  --gold-deep:   #A87A28;    /* pressed / hover-dark / accent text */
  --gold-pale:   #F3E4C6;    /* tints, chip fills */

  /* Soft pink-peach — feminine, warm, never hot */
  --blush:       #F2C4CE;    /* pastel rose */
  --peach:       #F7D4BA;    /* warm peach */
  --rose-deep:   #F2A4BE;    /* gradient stop for headings */

  /* Ink — deep warm dark, never cold black */
  --ink:         #1E1520;    /* primary text */
  --ink-2:       #2A1F2E;    /* alt deep text */
  --mauve:       #7A6B7E;    /* secondary text / subheads */
  --mauve-soft:  #A89BAC;    /* tertiary / captions / placeholder */

  /* Surfaces */
  --surface:     #FFFFFF;    /* cards */
  --surface-2:   #FFFCF8;    /* slightly warm card */
  --border-gold: rgba(201, 150, 58, 0.12);
  --border-soft: rgba(30, 21, 32, 0.06);
  --hairline:    rgba(122, 107, 126, 0.16);

  /* Rich album-cover gradients (the ONLY dark surfaces allowed) */
  --cover-bordeaux: linear-gradient(150deg, #6B1F35 0%, #2A0E1C 100%);
  --cover-grape:    linear-gradient(150deg, #4A2356 0%, #1A0E22 100%);
  --cover-navy:     linear-gradient(150deg, #243059 0%, #0F1228 100%);
  --cover-rust:     linear-gradient(150deg, #8A3D14 0%, #3D1A08 100%);
  --cover-plum:     linear-gradient(150deg, #6B2447 0%, #2E0E22 100%);
  --cover-emerald:  linear-gradient(150deg, #1F4A3A 0%, #0C2018 100%);

  /* Brand gradients (warm, limited — never rainbow) */
  --grad-gold:   linear-gradient(100deg, #C9963A 0%, #E8B86D 100%);
  --grad-warm:   linear-gradient(110deg, #C9963A 0%, #E8B86D 45%, #F2A4BE 100%);
  --grad-blush:  linear-gradient(120deg, #F7D4BA 0%, #F2C4CE 100%);
  --grad-hero:   linear-gradient(160deg, #FAF7F2 0%, #F2E8F5 100%);
  --grad-text:   linear-gradient(95deg, #C9963A 0%, #F2A4BE 100%);

  /* ---------- ELEVATION (warm-toned shadows) ---------- */
  --shadow-xs:  0 1px 2px rgba(30,21,32,0.05);
  --shadow-sm:  0 2px 10px rgba(201,150,58,0.08), 0 1px 3px rgba(30,21,32,0.05);
  --shadow-md:  0 10px 34px rgba(201,150,58,0.13), 0 4px 12px rgba(242,196,206,0.12);
  --shadow-lg:  0 24px 64px rgba(201,150,58,0.16), 0 10px 26px rgba(242,164,190,0.12);
  --shadow-xl:  0 40px 90px rgba(168,122,40,0.18), 0 16px 40px rgba(242,164,190,0.14);
  --glow-gold:  0 0 0 1px rgba(232,184,109,0.35), 0 0 36px rgba(232,184,109,0.45);
  --glow-blush: 0 0 40px rgba(242,196,206,0.55);

  /* ---------- RADII ---------- */
  --r-xs:   8px;
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  30px;
  --r-2xl: 40px;
  --r-pill: 999px;

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

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   0.2s;
  --dur-base:   0.35s;
  --dur-slow:   0.7s;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---------- SEMANTIC ROLE TOKENS ---------- */
  --bg:        var(--cream);
  --fg1:       var(--ink);
  --fg2:       var(--mauve);
  --fg3:       var(--mauve-soft);
  --accent:    var(--gold);
  --accent-2:  var(--blush);
  --on-accent: #FFFFFF;
}

/* ============================================================
   BASE ELEMENT STYLES
   ============================================================ */

body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- DISPLAY & HEADINGS (Playfair Display) ---------- */

.display, h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--fg1);
  text-wrap: balance;
}

.display {                       /* hero monster */
  font-size: clamp(2.8rem, 6.5vw, 5.5rem);
  font-weight: 800;
}

h1, .h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fg1);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: 1.18;
  color: var(--fg1);
}

/* Sub-heading / eyebrow / lead use the sans for contrast */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  color: var(--fg2);
  text-wrap: pretty;
}

/* ---------- BODY ---------- */

p, .body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--fg2);
  text-wrap: pretty;
}

.body-lg { font-size: 1.1875rem; line-height: 1.6; }
.body-sm { font-size: 0.9375rem; line-height: 1.55; }

.caption {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg3);
}

/* Gradient display text (final CTA & accents) */
.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Big numeric / stat accent */
.stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

a { color: var(--gold-deep); text-decoration: none; }
a:hover { color: var(--gold); }

::selection { background: var(--blush); color: var(--ink); }