/* ===============================================================
   BUKO Design System — Foundations / Tokens
   Version: 1.2 (2026-05-23) — +border-radius scale
   Source of truth: BUKO_Design_System.md + docs/ds/01-*, 02-*
   ---------------------------------------------------------------
   Цей файл містить лише CSS-змінні і базові селектори тегів.
   Стилі компонентів — у buko-components.css.
   =============================================================== */

:root {
  /* ===== COLORS — Brand ===== */
  --buko-color-primary: #194039;          /* PANTONE® 567 C */
  --buko-color-primary-dark: #13302A;     /* PANTONE® 567 C Dark — hover/active */
  --buko-color-primary-light: #B5D3CD;    /* PANTONE® 567 C Light — benefits bar */
  --buko-color-accent: #E6B372;           /* PANTONE® 7508 C — gold CTA */

  /* ===== COLORS — Text ===== */
  --buko-color-text-primary: #191B23;     /* default body text */
  --buko-color-text-black: #101820;       /* Black 500 — specific contrast cases */
  --buko-color-text-muted: #747474;       /* secondary text, captions */
  --buko-color-text-on-dark: #FFF9F4;     /* text over primary/primary-dark bg */

  /* ===== COLORS — Backgrounds ===== */
  --buko-color-surface: #FFFFFF;          /* Pure white for surface backgrounds (drawer, cards, badges). --buko-color-text-white is only for text/icons on dark bg. */
  --buko-color-bg-cream: #FFF9F4;         /* main page bg */
  --buko-color-bg-light: #F8F8F8;         /* footer, disabled */
  --buko-color-bg-overlay-cream: rgba(255, 249, 244, 0.75);  /* menu backdrop-blur */

  /* ===== COLORS — Borders ===== */
  --buko-color-border-default: #DEDEDE;   /* Gray 100 */
  --buko-color-border-muted: #CACACB;     /* Gray 200 — disabled */
  --buko-color-border-card: #EAEAEA;      /* Product card border (7D.0) */

  /* ===== COLORS — Status ===== */
  --buko-color-error: #EA0000;
  --buko-color-info: #0066CC;             /* TBD — unnamed in Figma, awaiting confirmation */
  --buko-color-rating: #F5A523;           /* зірки рейтингу, hot/popular badges */

  /* ===== COLORS — Semi-transparent primary (60% opacity) ===== */
  --buko-color-primary-60: rgba(25, 64, 57, 0.6);    /* для secondary-тексту в зелених контекстах */
  --buko-color-primary-muted: rgba(25, 64, 57, 0.7); /* drawer hours subtitle (Figma 2:18096) */
  --buko-color-accent-60: rgba(230, 179, 114, 0.6);  /* для пригаслого золотого */

  /* ===== FONTS — Family ===== */
  --buko-font-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --buko-font-body: 'Open Sans', system-ui, -apple-system, sans-serif;

  /* ===== FONTS — Weights ===== */
  --buko-fw-regular: 400;
  --buko-fw-semibold: 600;
  --buko-fw-bold: 700;

  /* ===== FONTS — Line heights ===== */
  --buko-lh-tight: 1.14;     /* H1 */
  --buko-lh-snug: 1.17;      /* H2, H3, price */
  --buko-lh-base: 1.4;       /* body */
  --buko-lh-small: 1.3;      /* small text */

  /* ===== FONTS — Sizes (DESKTOP defaults) ===== */
  --buko-fs-h1: 40px;
  --buko-fs-h2: 24px;
  --buko-fs-h3: 24px;
  --buko-fs-price: 24px;
  --buko-fs-body: 14px;
  --buko-fs-small: 12px;

  /* ===== COLORS (Figma sync 2026-05-21) ===== */
  --buko-color-bg-footer: #F8F8F8;         /* Figma Gray 50 */
  --buko-color-border-light: #CACACB;      /* Figma Gray 200 */

  /* ===== TYPOGRAPHY — aliases (Figma sync) ===== */
  --buko-font-size-small: 12px;
  --buko-font-size-body: 14px;
  --buko-font-size-h-price: 24px;

  --buko-font-weight-regular: 400;
  --buko-font-weight-semibold: 600;
  --buko-font-weight-bold: 700;

  --buko-line-height-tight: 1.17;          /* phone 24px */
  --buko-line-height-small: 1.3;           /* 12px text */
  --buko-line-height-body: 1.4;            /* 14px text */

  /* ===== BORDER RADIUS (de-facto convention з buko-components.css) ===== */
  --buko-radius-xs:     2px;       /* checkbox indicator */
  --buko-radius-sm:     4px;       /* badges, chips (Акція, Хіт, -13%) */
  --buko-radius-md:     8px;       /* cards (product card 7D.0), header buttons */
  --buko-radius-lg:     10px;      /* inputs, primary buttons, surfaces — основний */
  --buko-radius-pill:   9999px;    /* pill badges */
  --buko-radius-circle: 50%;       /* radio, avatars, slider handles */

  /* ===== SPACING scale (Figma sync) ===== */
  --buko-space-1: 4px;
  --buko-space-2: 8px;
  --buko-space-3: 12px;
  --buko-space-4: 16px;
  --buko-space-5: 20px;
  --buko-space-8: 40px;
  --buko-space-15: 92px;

  /* ===== LAYOUT ===== */
  --buko-container-max-width: 1440px;
  --buko-container-padding-x: 92px;

  /* ===== MOBILE LAYOUT TOKENS (5.8) ===== */
  --buko-font-size-mob-body: 13px;
  --buko-line-height-mob-body: 1.4;
  --buko-font-size-mob-small: 12px;
  --buko-line-height-mob-small: 1.36;
  --buko-font-size-mob-h3: 21px;
  --buko-line-height-mob-h3: 1.17;
  --buko-font-size-mob-link: 14px;
  --buko-font-size-mob-acc-title: 16px;
  --buko-color-border-divider: #E5E5E5;
  --buko-shadow-header: 0 4px 6px rgba(0, 0, 0, 0.12);

  /* ===== LAYOUT — Header height (for toast positioning etc.) ===== */
  --buko-header-height: 112px; /* desktop: benefits(32) + top-bar(padding 20*2 + icons 40) */
}

/* ===== Responsive overrides — MOBILE ===== */
@media (max-width: 767px) {
  :root {
    --buko-fs-h1: 32px;
    --buko-fs-h2: 24px;
    --buko-fs-h3: 21px;
    --buko-fs-body: 13px;
    --buko-fs-small: 12px;
    --buko-lh-small: 1.36;
    --buko-header-height: 96px; /* mobile: benefits(32) + top-bar(64) — per buko-header-footer.css */
  }
}

/* ===============================================================
   BASE TYPOGRAPHY — automatically apply via tags
   =============================================================== */

html {
  -webkit-text-size-adjust: 100%;
}

/* ── Global focus reset — прибираємо браузерний/Bootstrap outline ── */
*:focus {
  outline: none !important;
}

body {
  margin: 0;
  font-family: var(--buko-font-body);
  font-size: var(--buko-fs-body);
  font-weight: var(--buko-fw-regular);
  line-height: var(--buko-lh-base);
  color: var(--buko-color-text-primary);
  background-color: var(--buko-color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--buko-color-text-primary);
}

h1 {
  font-family: var(--buko-font-heading);
  font-size: var(--buko-fs-h1);
  font-weight: var(--buko-fw-regular);
  line-height: var(--buko-lh-tight);
}

h2 {
  font-family: var(--buko-font-heading);
  font-size: var(--buko-fs-h2);
  font-weight: var(--buko-fw-regular);
  line-height: var(--buko-lh-snug);
}

h3 {
  font-family: var(--buko-font-body);
  font-size: var(--buko-fs-h3);
  font-weight: var(--buko-fw-semibold);
  line-height: var(--buko-lh-snug);
}

p {
  margin: 0;
  font-family: var(--buko-font-body);
  font-size: var(--buko-fs-body);
  font-weight: var(--buko-fw-regular);
  line-height: var(--buko-lh-base);
}

strong, b {
  font-weight: var(--buko-fw-bold);
}

small {
  font-size: var(--buko-fs-small);
  line-height: var(--buko-lh-small);
}

a {
  color: var(--buko-color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--buko-color-primary-dark);
  text-decoration: underline;
}

/* ===============================================================
   UTILITY classes — sparingly, only where tag isn't enough
   =============================================================== */

.text-bold {
  font-weight: var(--buko-fw-bold);
}

.text-medium {
  font-weight: var(--buko-fw-semibold);
}

.text-small {
  font-size: var(--buko-fs-small);
  line-height: var(--buko-lh-small);
}

.text-muted {
  color: var(--buko-color-text-muted);
}

.price {
  font-family: var(--buko-font-body);
  font-size: var(--buko-fs-price);
  font-weight: var(--buko-fw-semibold);
  line-height: var(--buko-lh-snug);
  color: var(--buko-color-text-primary);
}

/* ─── HTML [hidden] safety ─── */
/* Stops author display rules from overriding the native [hidden] attribute. */
[hidden] {
  display: none !important;
}