/* Dani Land Toys — Design Tokens (редизайн 2026-10: шавлія, жовтий, персик, небесний, лаванда).
   Опис — frontend/design/DESIGN_SYSTEM.md. Імена змінних --bbt-* збережено, щоб нова палітра
   розійшлась на всі сторінки без правок шаблонів. */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800&family=Inter:wght@400;500;600&family=Neucha&family=Fredoka:wght@600;700&display=swap');

:root {
  /* --- Бренд --- */
  --bbt-sage:           #5B7261;
  --bbt-sage-hover:     #4D6253;
  --bbt-sage-light:     #E3EBE3;
  --bbt-yellow:         #F7C948;
  --bbt-yellow-hover:   #F9D46B;
  --bbt-yellow-light:   #FCEFC6;
  --bbt-peach:          #FFBFA7;
  --bbt-peach-light:    #FFE6DC;
  --bbt-sky:            #A7C7E7;
  --bbt-sky-light:      #E4EEF8;
  --bbt-lavender:       #D9C9E2;
  --bbt-lavender-light: #F1EAF4;

  /* --- Поверхні --- */
  --bbt-bg-page:        #F9F7EF;
  --bbt-bg-hero:        #F2EEE4;
  --bbt-bg-benefits:    #F1EFE6;
  --bbt-bg-promo:       var(--bbt-sage-light);
  --bbt-surface:        #FFFFFF;
  --bbt-media:          #F6F3EC;

  /* --- Текст (контраст на #F9F7EF: ink 13:1, muted 6:1, faint 3.6:1 — лише підписи) --- */
  --bbt-ink:            #2F2F2F;
  --bbt-ink-muted:      #5F5E59;
  --bbt-ink-soft:       #6A6963;
  --bbt-ink-faint:      #85827A;

  /* --- Старі імена акцентів — тепер на новій палітрі --- */
  --bbt-peach-circle:   var(--bbt-peach);
  --bbt-peach-icon:     #EE9A7B;
  --bbt-green:          var(--bbt-sage-light);
  --bbt-green-blob:     var(--bbt-sage-light);
  --bbt-green-icon:     var(--bbt-sage);
  --bbt-link-hover:     var(--bbt-sage);
  --bbt-sale:           #C2573B;

  /* --- Бордери --- */
  --bbt-hairline:       #E7E3D8;
  --bbt-hairline-2:     #EFEBE2;
  --bbt-hairline-3:     #ECE8DE;

  /* --- Шрифти --- */
  --bbt-font-display:   'Nunito', system-ui, sans-serif;
  --bbt-font-text:      'Inter', system-ui, sans-serif;
  --bbt-font-hand:      'Neucha', cursive;            /* акценти й підписи */
  --bbt-font-logo:      'Fredoka', system-ui, sans-serif; /* ТІЛЬКИ логотип */
  --bbt-ink-logo:       var(--bbt-sage);
  --bbt-logo-land:      #F2B731;
  --bbt-logo-toys:      #7E8F82;

  --bbt-h1:             clamp(34px, 4vw, 48px);
  --bbt-h2:             clamp(24px, 2.4vw, 32px);
  --bbt-h3:             24px;
  --bbt-body:           16px;
  --bbt-card-title:     14px;
  --bbt-price:          17px;
  --bbt-small:          14px;
  --bbt-micro:          13px;
  --bbt-badge:          12px;
  --bbt-lh-display:     1.17;
  --bbt-lh-body:        1.6;

  /* --- Радіуси --- */
  --bbt-r-sm:  10px;
  --bbt-r-md:  12px;
  --bbt-r-lg:  16px;
  --bbt-r-xl:  20px;
  --bbt-r-2xl: 20px;
  --bbt-r-hero:28px;
  --bbt-r-pill:999px;

  /* --- Відступи --- */
  --bbt-s-1: 4px;  --bbt-s-2: 8px;  --bbt-s-3: 12px; --bbt-s-4: 14px;
  --bbt-s-5: 18px; --bbt-s-6: 20px; --bbt-s-7: 22px; --bbt-s-8: 26px;
  --bbt-s-9: 34px; --bbt-s-10: 40px; --bbt-s-11: 44px; --bbt-s-12: 56px;

  --bbt-container: 1280px;
  --bbt-gutter:    40px;

  /* --- Тіні: м'які, лише картки, меню й кнопка-дія --- */
  --bbt-shadow-btn:  0 1px 2px rgba(47, 47, 47, .06);
  --bbt-shadow-card: 0 1px 2px rgba(47, 47, 47, .04), 0 10px 28px -18px rgba(47, 47, 47, .22);
  --bbt-shadow-menu: 0 24px 48px -18px rgba(47, 47, 47, .24);

  --bbt-ease: 140ms ease-out;
}

/* --- Основа --- */
body {
  margin: 0;
  background: var(--bbt-bg-page);
  color: var(--bbt-ink);
  font-family: var(--bbt-font-text);
  font-size: var(--bbt-body);
  line-height: var(--bbt-lh-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--bbt-ink); text-decoration: none; }
a:hover { color: var(--bbt-link-hover); }
:focus-visible { outline: 2px solid var(--bbt-sage); outline-offset: 2px; }

/* --- Типографіка --- */
.bbt-h1 { font-family: var(--bbt-font-display); font-weight: 700; font-size: var(--bbt-h1); line-height: var(--bbt-lh-display); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.bbt-h2 { font-family: var(--bbt-font-display); font-weight: 700; font-size: var(--bbt-h2); line-height: 1.25; margin: 0; }
.bbt-h3 { font-family: var(--bbt-font-display); font-weight: 700; font-size: var(--bbt-h3); line-height: 1.33; margin: 0; }
.bbt-hand { font-family: var(--bbt-font-hand); font-weight: 400; color: var(--bbt-ink-muted); }
.bbt-body { font-size: var(--bbt-body); line-height: var(--bbt-lh-body); color: var(--bbt-ink-muted); }
.bbt-micro { font-size: var(--bbt-micro); line-height: 1.5; color: var(--bbt-ink-soft); }

/* --- Компоненти --- */
.bbt-container { max-width: var(--bbt-container); margin: 0 auto; padding-inline: var(--bbt-gutter); }

/* Жовта — перегляд і навігація («Переглянути каталог»); шавлієва — покупка. */
.bbt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--bbt-yellow); color: var(--bbt-ink);
  border: none; border-radius: var(--bbt-r-pill);
  padding: 13px 24px; font: 600 15px/1.2 var(--bbt-font-text);
  box-shadow: var(--bbt-shadow-btn); cursor: pointer;
  transition: background var(--bbt-ease), color var(--bbt-ease);
}
.bbt-btn:hover { background: var(--bbt-yellow-hover); color: var(--bbt-ink); }
.bbt-btn--sage { background: var(--bbt-sage); color: #fff; }
.bbt-btn--sage:hover { background: var(--bbt-sage-hover); color: #fff; }

/* inline-flex, а не block: у block-кнопці svg — рядковий елемент, і під ним
   лишається місце під виносні літери, тож іконка сідала нижче сусідніх. */
.bbt-icon-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none;
  padding: var(--bbt-s-1); color: var(--bbt-ink); cursor: pointer; transition: color var(--bbt-ease); }
.bbt-icon-btn:hover { color: var(--bbt-link-hover); }
.bbt-icon { width: 22px; height: 22px; stroke-width: 1.7; }

.bbt-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bbt-yellow-light); color: var(--bbt-ink);
  border-radius: var(--bbt-r-pill); padding: 4px 11px;
  font: 600 var(--bbt-badge)/1.3 var(--bbt-font-text);
}

.bbt-card {
  background: var(--bbt-surface);
  border: 1px solid var(--bbt-hairline-3);
  border-radius: var(--bbt-r-xl);
  padding: 10px 10px 14px;
  display: flex; flex-direction: column; gap: 8px;
}

.bbt-menu {
  background: var(--bbt-surface);
  border: 1px solid var(--bbt-hairline);
  border-radius: var(--bbt-r-lg);
  box-shadow: var(--bbt-shadow-menu);
  overflow: hidden;
}

/* --- Логотип: «Dani» із сонечком над «i», нижче «Land», під ним «toys» --- */
.bbt-logo {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  font-family: var(--bbt-font-logo); font-weight: 700; font-size: 30px;
  line-height: 1; white-space: nowrap;
}
.bbt-logo__dani { color: var(--bbt-ink-logo); letter-spacing: -.01em; }
.bbt-logo__i { position: relative; display: inline-block; line-height: 1; }
/* left/bottom ставлять точку (40,60) SVG у центр крапки «i» Fredoka 700 — масштабувати лише font-size. */
.bbt-logo__rays {
  position: absolute; left: -.2763em; bottom: .5688em;
  width: .8em; height: .8em; overflow: visible;
}
.bbt-logo__land {
  display: flex; flex-direction: column; align-items: center;
  color: var(--bbt-logo-land); font-size: .62em; margin: -.12em 0 0 .62em;
}
.bbt-logo__toys {
  color: var(--bbt-logo-toys); font-size: .58em; font-weight: 600;
  letter-spacing: .08em; margin-top: -.12em;
}