/*
 * Дизайн-система бренду ALAVYA HOME.
 *
 * Значення зняті з реального магазину alavya-shop.de (веб-архів, знімки
 * жовтень–грудень 2025) — це фірмовий стиль бренду, який ми викупили,
 * а не копія чужої теми. Сама тема (Shopify Dawn) не переносилась.
 *
 * Джерело і сирі матеріали: projects/ALAVYA/webarchive/
 */

:root {
  /* Основні кольори */
  --brand-bg: #ffffff;
  --brand-fg: #1c1c1c;
  --brand-fg-muted: #454545;

  /* Фірмовий бежевий — головний акцент бренду */
  --brand-accent: #cfc3b7;
  --brand-accent-fg: #ffffff;

  /* Темний акцент (кнопки, футер) */
  --brand-dark: #121212;
  --brand-dark-fg: #ffffff;

  /* Зелений — успіх, наявність, знижки */
  --brand-success: #29bb8b;
  --brand-success-fg: #ffffff;

  /* Типографіка: магазин використовував Raleway */
  --brand-font: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand-font-weight: 400;
  --brand-font-weight-bold: 600;

  /* Розкладка.
     У темі Shopify 130rem застосовувалась інакше; для власної верстки це
     завелика ширина — рядок стає нечитабельним, а шапка розривається. */
  --brand-page-width: 78rem;
  --brand-page-width-wide: 90rem;
  /*
   * Surfaces and hairlines. These were referenced across the stylesheet before
   * they existed, which made every `1px solid var(--brand-line)` an invalid
   * declaration — the borders simply never drew. Declared here so the whole
   * storefront shares one set.
   */
  --brand-surface: #ffffff;
  --brand-bg-soft: #f7f5f2;
  --brand-line: #e5e0da;
  /* Muted text: 5.4:1 on white, so it stays readable rather than decorative. */
  --brand-muted: #6f6a64;
  /* The accent is a pale sand — too light for text or icons, so ink-side pair. */
  --brand-accent-strong: #8a7866;
  --brand-gutter: 1.25rem;

  --brand-radius: 0.4rem;
  --brand-space: 1rem;
}

/*
 * Raleway, self-hosted. No request ever leaves for Google: a German shop that
 * pulls fonts from fonts.gstatic.com hands every visitor's IP to a third
 * country, which is exactly what LG München I ruled against in 2022.
 *
 * One variable file per style covers 100–900. The static build shipped only 400
 * and 700 while the stylesheet asked for 500 and 600 — the browser then faked
 * those by smearing 400, which is what made headings and numbers look uneven.
 */
@font-face {
  font-family: "Raleway";
  src: url("/brand/fonts/raleway-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("/brand/fonts/raleway-variable-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}