/* ============================================================
   Weleda Design System — Foundation tokens
   Swiss natural cosmetics · Since 1921
   ============================================================ */

/* ------------------------------------------------------------
   Noto Sans — основной шрифт сайта. Вариативный (ось насыщенности 100–900),
   поэтому один self-hosted woff2 покрывает все веса (400/500/700), плюс
   отдельный файл для курсива. Ось ширины закреплена на 100, начертание
   урезано до латиницы + кириллицы + пунктуации (файлы ~150–170 КБ).
   Файлы: assets/fonts/NotoSans*.woff2. Исходники и конвертация — папка «Шрифт».
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/NotoSans.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/NotoSans-Italic.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* ---------- BRAND PALETTE ---------- */
  /* Greens are the spine of the system — deep forest down to pale leaf. */
  --w-green-deep:    #0b4535;   /* primary brand, dark bg, headers */
  --w-green-mid:     #3A6B4A;   /* secondary, links, CTA hover */
  --w-green-herb:    #6B8B6B;   /* accent, series labels, captions */
  --w-green-sage:    #A8BEA8;   /* light accent, dividers */
  --w-green-pale:    #D4E8D4;   /* badge surfaces, hover tints */

  /* Warm naturals — paper, sand, bark — pair with green */
  --w-cream:         #F0EDE4;   /* text on dark, warm card bg */
  --w-sand:          #C8B99A;   /* warm border, soft divider */
  --w-bark:          #6B5A3A;   /* warm text, italic quotes */

  /* ---------- INK / SURFACE (брендбук: Warm Gray) ---------- */
  --w-ink:           #444142;   /* Warm Gray 100% — основной текст по брендбуку */
  --w-ink-muted:    #6A6766;   /* secondary text */
  --w-ink-faint:    #9A9794;   /* labels, captions, meta */
  --w-bg:            #FDFCFB;   /* page background, warm off-white */
  --w-bg-card:       #FFFFFF;   /* card / panel surface */
  --w-bg-warm:       #F4F4F4;   /* Warm Gray 6% — альт. поверхность */
  --w-border:        rgba(68, 65, 66, 0.10);
  --w-border-mid:    rgba(68, 65, 66, 0.16);
  --w-border-input:  #B0BFB0;   /* sage-tinted input border */
  --w-gray-15:       #E3E3E3;   /* Warm Gray 15% — разделители */
  --w-green-accent:  #ADFC78;   /* Digital Green — только цифровой акцент */

  /* ---------- PRODUCT SERIES COLORS ---------- */
  /* Each Weleda product line carries its own botanical color. */
  --w-series-wildrose:     #E8A8B8;   /* Шиповник / Wild Rose */
  --w-series-buckthorn:    #F5B86A;   /* Облепиха / Sea Buckthorn */
  --w-series-iris:         #D4A8C8;   /* Ирис / Iris */
  --w-series-almond:       #E8D4A0;   /* Миндаль / Almond */
  --w-series-calendula:    #B8D4C8;   /* Календула / Calendula */
  --w-series-lavender:     #C0B8D8;   /* Лаванда / Lavender */
  --w-series-birch:        #AACCA4;   /* Берёза / Birch */
  --w-series-arnica:       #E8C8A0;   /* Арника / Arnica */

  /* ---------- TYPEFACES — Noto Sans (вариативный, один для заголовков и текста) ---------- */
  /* Заголовки и текст — одна фирменная sans-семья, разница только в начертании. */
  --w-font-serif:    'Noto Sans', 'Helvetica Neue', Arial, sans-serif;   /* заголовки (бывш. serif-слот) */
  --w-font-sans:     'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --w-font-sans-alt: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --w-font-mono:     'Courier New', ui-monospace, monospace;

  /* ---------- TYPE SCALE — semantic ---------- */
  /* Display + headings are serif, light weight; body + UI is sans. */
  --w-display-font:    var(--w-font-serif);
  --w-display-weight:  300;
  --w-display-size:    44px;
  --w-display-lh:      1.1;
  --w-display-ls:      0.02em;

  --w-h1-font:         var(--w-font-serif);
  --w-h1-weight:       300;
  --w-h1-size:         34px;
  --w-h1-lh:           1.15;
  --w-h1-ls:           0.02em;

  --w-h2-font:         var(--w-font-serif);
  --w-h2-weight:       400;
  --w-h2-size:         24px;
  --w-h2-lh:           1.25;
  --w-h2-ls:           0;

  --w-h3-font:         var(--w-font-serif);
  --w-h3-weight:       400;
  --w-h3-size:         18px;
  --w-h3-lh:           1.3;
  --w-h3-ls:           0;

  --w-body-font:       var(--w-font-sans);
  --w-body-weight:     400;
  --w-body-size:       14px;
  --w-body-lh:         1.75;

  --w-body-lg-size:    16px;

  --w-label-font:      var(--w-font-sans);
  --w-label-weight:    500;
  --w-label-size:      10px;
  --w-label-ls:        0.14em;

  --w-caption-size:    11px;
  --w-caption-lh:      1.5;

  --w-quote-font:      var(--w-font-serif);
  --w-quote-style:     italic;
  --w-quote-weight:    300;
  --w-quote-size:      17px;
  --w-quote-color:     var(--w-bark);

  /* ---------- SPACING ---------- */
  --w-space-xs:   4px;
  --w-space-sm:   8px;
  --w-space-md:   12px;
  --w-space-base: 16px;
  --w-space-lg:   24px;
  --w-space-xl:   40px;
  --w-space-2xl:  64px;
  --w-space-3xl:  96px;

  /* ---------- RADII ---------- */
  /* Weleda runs SHARP-to-soft: buttons are 0 / 2 px, surfaces 10–14 px. */
  --w-radius-none:  0;        /* buttons */
  --w-radius-xs:    2px;      /* inputs, badges */
  --w-radius-sm:    6px;      /* tags */
  --w-radius-md:    4px;      /* cards — лёгкое скругление (карточки серий/кампаний и товаров) */
  --w-radius-lg:    14px;     /* large blocks */
  --w-radius-pill:  999px;    /* pills */

  /* ---------- BORDERS ---------- */
  --w-border-hairline: 0.5px solid var(--w-border);
  --w-border-thin:     1px solid var(--w-border-mid);

  /* ---------- SHADOWS ---------- */
  /* Weleda is FLAT — shadows are minimal, used sparingly. */
  --w-shadow-none:  none;
  --w-shadow-sm:    0 1px 2px rgba(30, 58, 42, 0.04);
  --w-shadow-md:    0 4px 16px rgba(30, 58, 42, 0.06);
  --w-shadow-lg:    0 12px 40px rgba(30, 58, 42, 0.10);

  /* ---------- MOTION ---------- */
  --w-ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --w-duration-fast: 120ms;
  --w-duration:      200ms;
  --w-duration-slow: 360ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  font-family: var(--w-font-sans);
  background: var(--w-bg);
  color: var(--w-ink);
  font-size: var(--w-body-size);
  line-height: var(--w-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .w-h1 {
  font-family: var(--w-h1-font);
  font-weight: var(--w-h1-weight);
  font-size: var(--w-h1-size);
  line-height: var(--w-h1-lh);
  letter-spacing: var(--w-h1-ls);
  color: var(--w-ink);
}

h2, .w-h2 {
  font-family: var(--w-h2-font);
  font-weight: var(--w-h2-weight);
  font-size: var(--w-h2-size);
  line-height: var(--w-h2-lh);
  color: var(--w-ink);
}

h3, .w-h3 {
  font-family: var(--w-h3-font);
  font-weight: var(--w-h3-weight);
  font-size: var(--w-h3-size);
  line-height: var(--w-h3-lh);
  color: var(--w-green-mid);
}

.w-display {
  font-family: var(--w-display-font);
  font-weight: var(--w-display-weight);
  font-size: var(--w-display-size);
  line-height: var(--w-display-lh);
  letter-spacing: var(--w-display-ls);
}

p, .w-body {
  font-family: var(--w-body-font);
  font-size: var(--w-body-size);
  line-height: var(--w-body-lh);
  color: var(--w-ink-muted);
}

.w-body-lg {
  font-size: var(--w-body-lg-size);
  line-height: var(--w-body-lh);
}

.w-label {
  font-family: var(--w-label-font);
  font-weight: var(--w-label-weight);
  font-size: var(--w-label-size);
  letter-spacing: var(--w-label-ls);
  text-transform: uppercase;
  color: var(--w-ink-faint);
}

.w-caption {
  font-size: var(--w-caption-size);
  line-height: var(--w-caption-lh);
  color: var(--w-ink-muted);
}

.w-quote {
  font-family: var(--w-quote-font);
  font-style: var(--w-quote-style);
  font-weight: var(--w-quote-weight);
  font-size: var(--w-quote-size);
  color: var(--w-quote-color);
  line-height: 1.5;
}

code, .w-mono {
  font-family: var(--w-font-mono);
  font-size: 12px;
  color: var(--w-ink-muted);
}