/* ============================================================
   BellyCare — Design Config
   Single source of truth for the whole site.
   Token values extracted from the reference design.
   ============================================================ */

:root {
  /* ----- Colors (exact reference values) ----- */
  --color-ink:    rgb(13, 5, 3);       /* headings, dark pill button */
  --color-brown:  rgb(141, 105, 89);   /* body text, secondary */
  --color-salmon: rgb(225, 147, 125);  /* accent: badges, icons, checks, toggle */
  --color-sage:   rgb(142, 152, 103);  /* primary buttons */
  --color-cream:  rgb(248, 243, 236);  /* alternating section / container bg */
  --color-paper:  rgb(252, 250, 247);  /* page background, cards on cream */
  --color-white:  rgb(255, 255, 255);  /* cards, chips */

  /* Derived tints (so nothing is hard-coded elsewhere) */
  --color-salmon-soft: rgba(225, 147, 125, 0.16);
  --color-ink-faint:   rgba(13, 5, 3, 0.08);
  --color-line:        rgba(141, 105, 89, 0.22);
  --color-white-soft:  rgba(255, 255, 255, 0.85);

  /* Floating-pill palette (slogan section) */
  --color-pill-brown: rgb(141, 105, 89);
  --color-pill-blue:  rgb(125, 164, 219);
  --color-pill-green: rgb(142, 152, 103);
  --color-pill-salmon:rgb(225, 147, 125);

  /* Fabric textures (blended with a palette color via
     background-blend-mode: luminosity, so the hue always
     comes from the palette, the weave from the photo) */
  --tex-pink:     url('assets/texture-pink.jpg');
  --tex-green:    url('assets/texture-green.jpg');
  --tex-blue:     url('assets/texture-blue.jpg');
  --tex-lavender: url('assets/texture-lavender.jpg');

  /* Cotton-textured salmon surface (footer CTA, stat card) */
  --surface-salmon-color: rgb(219, 134, 110);
  --surface-salmon-tex:   var(--tex-pink);

  /* Photography */
  --img-hero:     url('assets/hero.jpg');
  --img-sidecard: url('assets/sidecard.jpg');
  --img-room:     url('assets/room.jpg');
  --img-expert:   url('assets/expert.jpg');
  --img-steps:    url('assets/steps.jpg');
  --img-slogan:   url('assets/slogan.jpg');
  --img-avatar-1: url('assets/avatar1.jpg');
  --img-avatar-2: url('assets/avatar2.jpg');
  --img-avatar-3: url('assets/avatar3.jpg');
  --img-avatar-4: url('assets/avatar4.jpg');

  /* ----- Typography ----- */
  --font-heading: 'Castoro', serif;     /* normal + italic */
  --font-body:    'Nunito', sans-serif;

  --text-h1: clamp(2.4rem, 4vw, 3.5rem);
  --text-h2: clamp(2.1rem, 3.8vw, 3.2rem);
  --text-h3: clamp(1.4rem, 2.2vw, 1.85rem);
  --text-h4: 1.25rem;
  --text-md: 0.95rem;
  --text-sm: 0.83rem;

  --leading-tight: 1.15;
  --title-halo: 0.14em;   /* white stroke around hero title glyphs */
  --leading-body:  1.7;

  /* ----- Radii ----- */
  --radius-pill: 100px;  /* buttons, badges, chips */
  --radius-card: 24px;   /* cards, panels, big containers */
  --radius-img:  20px;   /* photo cards */
  --radius-sm:   12px;

  /* ----- Spacing ----- */
  --space-section: clamp(70px, 9vw, 130px);
  --space-gap-lg:  48px;
  --space-gap:     24px;
  --space-gap-sm:  12px;
  --container-max: 1280px;
  --container-pad: clamp(20px, 4vw, 40px);

  /* ----- Motion ----- */
  --anim-duration:    0.8s;
  --anim-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --anim-distance:    36px;    /* fade-up travel */
  --anim-stagger:     90ms;    /* delay between siblings */
  --counter-duration: 1600;    /* ms, read by script.js */
  --float-duration:   6s;      /* floating chips/pills */

  /* ----- Elevation ----- */
  --shadow-card: 0 18px 40px -22px rgba(13, 5, 3, 0.22);
  --shadow-chip: 0 8px 20px -8px rgba(13, 5, 3, 0.18);
  --shadow-nav:  0 8px 28px -16px rgba(13, 5, 3, 0.16);
}