/* =============================================================
   Alvaro Caffé — base.css
   Фундамент: дизайн-токени, reset, типографіка, layout, утиліти.
   Вантажиться завжди й першим. @font-face інжектиться з functions.php.
   ============================================================= */

:root {
  /* --- Brand colors (з макета Figma) --- */
  --c-dark:        #4e2827;  /* темно-кавовий */
  --c-ink:         #2d2a26;  /* майже чорний текст */
  --c-brown:       #84592c;  /* коричневий акцент */
  --c-gold:        #c9a368;  /* золотий */
  --c-beige:       #efe6da;  /* кремова пігулка / кнопки */
  --c-cream:       #faf7f2;  /* світлий текст на темному */
  --c-cream-2:     #f8f0e5;  /* фон сторінки */
  --c-section:     #ece2d3;  /* фон світлих секцій */
  --c-white:       #ffffff;
  --c-muted:       #706b65;  /* сірий текст */
  --c-placeholder: #aca39b;  /* плейсхолдер пошуку */
  --c-border:      #b2a9a0;  /* бордер інпутів */

  --c-text:    var(--c-ink);
  --c-heading: var(--c-dark);

  /* --- Typography --- */
  --font-body:   'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script: 'Atziluth', 'Brush Script MT', cursive;

  /* --- Layout --- */
  --container-max: 1248px;  /* 1200 контент + 2×24 padding */
  --container-pad: 24px;
  --gutter:        120px;   /* поля макета при 1440 */

  /* --- Radius --- */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 15px;
  --r-xl: 24px;

  /* --- Legacy-аліаси (для ще не перенесених секцій у style.css) --- */
  --color-dark:        var(--c-dark);
  --color-dark-2:      var(--c-ink);
  --color-brown:       var(--c-brown);
  --color-brown-mid:   #caad91;
  --color-cream:       var(--c-cream-2);
  --color-cream-light: #fdf3ed;
  --color-beige:       var(--c-beige);
  --color-tan:         #e2c690;
  --color-white:       var(--c-white);
  --color-text:        var(--c-ink);
  --color-text-muted:  var(--c-brown);
  --font-heading:      var(--font-body);
  --container-max-legacy: 1320px;
  --section-gap:       80px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
}

/* =============================================================
   RESET & BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-text);
  background-color: var(--c-cream-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 102%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; transition: color .2s ease; }

ul, ol { list-style: none; }

button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

/* =============================================================
   TYPOGRAPHY
   У макеті заголовки набрані Gilroy (а не скриптом).
   ============================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.15;
  color: var(--c-heading);
}

p { margin: 0; }

/* Скриптовий «eyebrow» (Atziluth) */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: normal;
}

/* =============================================================
   LAYOUT
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: 80px; }

/* =============================================================
   UTILS
   ============================================================= */
.text-center { text-align: center; }
.mt-auto { margin-top: auto; }
.mb-0 { margin-bottom: 0 !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* WP alignments */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }