/* ============================================================
   AngelBaby — Design Foundations
   Colors + Typography tokens (base + semantic)
   «Возвращаем веру в чудо»
   ============================================================
   Fonts are loaded from Google Fonts (full Cyrillic coverage):
   - Cormorant  → elegant display serif (headings, the "miracle" voice)
   - Manrope    → clean humanist grotesque (UI + body)
   If used offline, mirror these into /fonts and swap the @import.
   ============================================================ */

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

:root {
  /* ---------- BASE PALETTE ---------------------------------- */

  /* Warm neutrals — the "air" the brand breathes in */
  --ab-porcelain:    #FCF9F4;   /* page background, warm white       */
  --ab-cream:        #F5EEE3;   /* alternating section background    */
  --ab-sand:         #ECE1D1;   /* sunken surfaces, subtle fills     */
  --ab-linen:        #E3D6C3;   /* hairline borders                  */
  --ab-paper:        #FFFDFA;   /* raised card surface               */
  --ab-white:        #FFFFFF;

  /* Primary — warm apricot / clay: hope, skin, new life */
  --ab-blush-50:     #FBEDE5;
  --ab-apricot-200:  #F2CFBA;
  --ab-clay-400:     #DDA086;
  --ab-clay-500:     #CE8468;   /* PRIMARY                           */
  --ab-clay-600:     #B56A4F;   /* primary hover / deep              */
  --ab-terracotta-700:#94503A;  /* darkest warm                      */

  /* Secondary — sage: calm, growth, trust */
  --ab-sage-100:     #E8ECE1;
  --ab-sage-300:     #B9C5AA;
  --ab-sage-500:     #8B9A77;   /* SECONDARY                         */
  --ab-sage-700:     #5C6A49;

  /* Accent — champagne gold: premium, used sparingly */
  --ab-gold-300:     #E1C490;
  --ab-gold-500:     #C2A05F;

  /* Text — warm espresso, never pure black */
  --ab-ink:          #2B2420;   /* headings                          */
  --ab-ink-soft:     #4C423A;   /* body                              */
  --ab-ink-muted:    #776B5F;   /* secondary / captions              */
  --ab-ink-faint:    #A89C8E;   /* disabled / hairline text          */

  /* Status — warm-leaning, on brand */
  --ab-success:      #6E8E66;
  --ab-warning:      #D69A52;
  --ab-error:        #C2553D;

  /* ---------- SEMANTIC TOKENS ------------------------------- */
  --bg:              var(--ab-porcelain);
  --bg-alt:          var(--ab-cream);
  --surface:         var(--ab-paper);
  --surface-sunken:  var(--ab-sand);
  --border:          var(--ab-linen);
  --border-strong:   #D8C7B0;

  --text:            var(--ab-ink);
  --text-soft:       var(--ab-ink-soft);
  --text-muted:      var(--ab-ink-muted);
  --text-faint:      var(--ab-ink-faint);
  --on-primary:      #FFF9F4;

  --primary:         var(--ab-clay-500);
  --primary-hover:   var(--ab-clay-600);
  --primary-soft:    var(--ab-blush-50);
  --secondary:       var(--ab-sage-500);
  --secondary-soft:  var(--ab-sage-100);
  --accent:          var(--ab-gold-500);

  /* ---------- TYPOGRAPHY ------------------------------------ */
  --font-display: 'Spectral', 'Times New Roman', Georgia, serif;
  --font-sans:    'Golos Text', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Fluid type scale */
  --fs-display:  clamp(2.5rem, 1.35rem + 5.7vw, 6.5rem);   /* 40 → 104 */
  --fs-h1:       clamp(2.1rem, 1.4rem + 3vw, 4.25rem);     /* 34 → 68  */
  --fs-h2:       clamp(1.7rem, 1.2rem + 2.2vw, 3.1rem);    /* 27 → 50  */
  --fs-h3:       clamp(1.4rem, 1.15rem + 1.1vw, 2rem);     /* 22 → 32  */
  --fs-h4:       1.375rem;                               /* 22       */
  --fs-body-lg:  1.25rem;                                /* 20       */
  --fs-body:     1.0625rem;                              /* 17       */
  --fs-small:    0.9375rem;                              /* 15       */
  --fs-caption:  0.8125rem;                              /* 13       */

  --lh-tight:    1.06;
  --lh-snug:     1.18;
  --lh-body:     1.72;
  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-eyebrow:  0.22em;

  /* ---------- SPACING (4px base) ---------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;    --sp-11: 12rem;
  --container:  1240px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 5rem);

  /* ---------- RADII (soft, organic) ------------------------- */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 18px; --r-lg: 28px;
  --r-xl: 40px; --r-2xl: 56px; --r-pill: 999px;

  /* ---------- SHADOWS (warm-tinted, diffuse) ---------------- */
  --shadow-xs: 0 1px 2px rgba(74,52,36,0.06);
  --shadow-sm: 0 4px 14px -6px rgba(74,52,36,0.12);
  --shadow-md: 0 16px 34px -18px rgba(74,52,36,0.18);
  --shadow-lg: 0 30px 60px -26px rgba(74,52,36,0.22);
  --shadow-xl: 0 50px 100px -45px rgba(74,52,36,0.26);
  --ring: 0 0 0 4px rgba(206,132,104,0.22);

  /* ---------- MOTION ---------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur:      0.5s;
  --dur-slow: 0.9s;
}

/* ============================================================
   BASE ELEMENT STYLING
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-soft);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text); }

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
}
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: var(--ls-tight);
}

p { margin: 0 0 1em; }
.lead {
  font-size: var(--fs-body-lg);
  color: var(--text-soft);
  line-height: 1.66;
}
.muted { color: var(--text-muted); }

/* Kicker — small section label. Sentence case, elegant italic serif.
   No uppercase, no letter-spacing, no dash/line prefix, no middot separators. */
.kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--primary);
}

/* Elegant emphasis — italic display accent often used in headlines */
.accent-em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--primary);
}

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

::selection { background: var(--ab-apricot-200); color: var(--ab-ink); }