/* ================================================================
   HIDEOUT template — design tokens
   Ниша: груминг. Accent: терракотовый #D97757. Hero: персиково-бежевый.
   Меняешь тут — меняется весь сайт.
   ================================================================ */
:root {
  /* ---- Colour ---- */
  --ink:          #1A1614;   /* headings, dark pills */
  --ink-2:        #4A423C;   /* strong body */
  --ink-soft:     #756A62;   /* secondary text */
  --bg:           #FFFCF9;   /* page background, off-white cream */
  --bg-soft:      #F9F2EA;   /* alternating section background */
  --bg-hero:      #F7E9D7;   /* H5 hero flood colour, peachy beige */
  --bg-card:      #FFFFFF;
  --accent:       #D97757;   /* terracotta — единственный акцент */
  --accent-dark:  #BE5B3B;
  --accent-soft:  #F6E0D6;   /* accent tint background */
  --accent-wash:  #FCF1EB;
  --star:         #E8A33D;   /* звёзды рейтинга */
  --line:         rgba(26, 22, 20, .10);
  --line-strong:  rgba(26, 22, 20, .18);
  --white:        #FFFFFF;

  /* ---- Type ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-h1:    clamp(2.5rem, 1.35rem + 4.8vw, 4.75rem);   /* 40 → 76px */
  --fs-h2:    clamp(2rem, 1.35rem + 2.7vw, 3.25rem);     /* 32 → 52px */
  --fs-h3:    clamp(1.375rem, 1.19rem + .78vw, 1.75rem); /* 22 → 28px */
  --fs-lead:  clamp(1.0625rem, .99rem + .31vw, 1.25rem); /* 17 → 20px */
  --fs-body:  1.0625rem;                                  /* 17px */
  --fs-small: .9375rem;                                   /* 15px */
  --fs-eyebrow: .8125rem;                                 /* 13px */

  --lh-display: 1.05;
  --lh-body:    1.55;

  /* ---- Radius ---- */
  --r-card:  24px;
  --r-media: 20px;
  --r-input: 12px;
  --r-pill:  999px;

  /* ---- Shadow ---- */
  --sh-btn:    0 4px 16px rgba(0, 0, 0, .08);
  --sh-btn-hv: 0 10px 26px rgba(0, 0, 0, .16);
  --sh-card:   0 2px 4px rgba(26, 22, 20, .03), 0 12px 32px rgba(26, 22, 20, .06);
  --sh-card-hv:0 4px 8px rgba(26, 22, 20, .04), 0 22px 48px rgba(26, 22, 20, .12);

  /* ---- Space ---- */
  --pad-section:  112px;   /* desktop vertical rhythm */
  --pad-section-m: 72px;   /* mobile */
  --gutter:       clamp(20px, 5vw, 40px);
  --maxw:         1200px;
  --maxw-narrow:  760px;

  /* ---- Motion ---- */
  --ease:    cubic-bezier(.22, .61, .36, 1);
  --dur:     .38s;

  /* ---- Layout ---- */
  --nav-h:   76px;
}

@media (max-width: 768px) {
  :root {
    --pad-section: var(--pad-section-m);
    --nav-h: 64px;
  }
}