/* Söl Tea — design tokens
 * Єдине джерело правди для CSS variables.
 * Підключається у всіх sol-*.html через <link rel="stylesheet" href="tokens.css">.
 * Зміни тут пропагуються на весь сайт. */

:root {
  /* Кольори */
  --cream: #F5F0E8;
  --cream-bright: #FDFCF9;
  --sand: #E8E0CC;
  --green-800: #226F54;
  --green-500: #7CC44A;
  --terra: #C4855A;
  --black: #1C1A14;
  --gray-800: #4A4538;
  --gray-500: #7A7060;
  --gray-300: #B5AFA3;
  --gray-100: #D9D3C7;

  /* Стан помилки / деструктивні дії */
  --error: #E84A2E;

  /* Шрифти */
  --font-display: 'Inter', sans-serif;       /* Заголовки */
  --font-body: 'DM Sans', sans-serif;        /* Body / UI */

  /* Border radius */
  --radius-card: 20px;                       /* Картки, badges, panels */
  --radius-card-lg: 24px;                    /* Великі картки, hero, gallery */
  --radius-pill: 40px;                       /* Кнопки, пілюлі */

  /* Spacing */
  --space-xs: 16px;
  --space-s: 24px;
  --space-m: 32px;
  --space-l: 40px;
  --space-xl: 48px;
  --space-2xl: 80px;
  --space-3xl: 100px;

  /* Typography — fixed scale
   * Всі значення парні. Назви ролей у коментарі — не алисах,
   * а підказка де токен природньо застосовується. */
  --text-xs:  10px;   /* badge counter (cart-badge, wish-badge, pp-item-badge) */
  --text-s:   12px;   /* caption, helper text, meta-label (pp-email, summary-note, footer note) */
  --text-m:   14px;   /* body / nav links / menu items / pills / tab labels */
  --text-l:   16px;   /* button text, prices, default icon size, summary labels */
  --text-xl:  18px;   /* large UI text, CTA icons (sort, remove), card title emphasis */
  --text-2xl: 20px;   /* avatar icon, empty-state h3, larger menu icon */
  --text-3xl: 22px;   /* section h3, pi-brew-title, profile section header, nav-icon */
  --text-4xl: 24px;   /* display, scroll-top icon, larger emphasis */
  --text-5xl: 26px;   /* product h1 mobile, pi-price mobile, co-total-value, auth-modal heading */
  --text-6xl: 28px;   /* not-found h2, reviews h2, similar h2, success ord-num, starter h3 mobile */
  --text-7xl: 32px;   /* pi-price desktop, success-icon, sol-tea starter h3 (mid), pp-auth-icon */
  --text-8xl: 36px;   /* product-info h1 desktop, sol-tea starter h3 desktop, brand-name */
  --text-9xl: 56px;   /* stat-num desktop emphasis (about, max-width media) */

  /* Typography — responsive headings (clamp: mobile_min, viewport%, desktop_max) */
  --text-h3:   clamp(26px, 3vw, 38px);   /* section title (e.g. settings h2) */
  --text-h2:   clamp(28px, 8vw, 40px);   /* mobile-large heading variant */
  --text-h2-l: clamp(36px, 4.5vw, 56px); /* large section heading (success, about whyus/team h2) */
  --text-h1:   clamp(40px, 5vw, 64px);   /* page hero h1 */

  /* Cream-bright з прозорістю (overlay поверх фото / dark bg, текст на зеленому) */
  --cream-bright-92: rgba(253, 252, 249, 0.92);
  --cream-bright-88: rgba(253, 252, 249, 0.88);
  --cream-bright-75: rgba(253, 252, 249, 0.75);
  --cream-bright-55: rgba(253, 252, 249, 0.55);
  --cream-bright-45: rgba(253, 252, 249, 0.45);
  --cream-bright-15: rgba(253, 252, 249, 0.15);

  /* Black з прозорістю (shadows, borders, subtle overlays) */
  --black-84: rgba(28, 26, 20, 0.84);
  --black-30: rgba(28, 26, 20, 0.30);
  --black-14: rgba(28, 26, 20, 0.14);
  --black-12: rgba(28, 26, 20, 0.12);
  --black-10: rgba(28, 26, 20, 0.10);
  --black-08: rgba(28, 26, 20, 0.08);

  /* Error background tints (для подсвічування input.error) */
  --error-bg: rgba(232, 74, 46, 0.10);
  --error-bg-soft: rgba(232, 74, 46, 0.07);
  --error-bg-strong: rgba(232, 74, 46, 0.18);
}

/* Skip-to-content link (a11y — перший focusable елемент при tab) */
.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  left: 8px;
  top: 8px;
  width: auto;
  height: auto;
  padding: 12px 20px;
  background: var(--green-800);
  color: var(--cream-bright);
  border-radius: var(--radius-pill);
  z-index: 999;
  font-family: var(--font-body);
  font-size: var(--text-l);
  font-weight: 500;
  text-decoration: none;
}

/* Skeleton loader — shimmer для product images (як Instagram/LinkedIn)
 * Клас .sol-skeleton додається на контейнер зображення поки фото ще вантажиться.
 * Прибирається автоматично коли img отримує onload або onerror. */
@keyframes sol-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.sol-skeleton {
  color: transparent !important;
  background: linear-gradient(
    90deg,
    var(--sand) 0%,
    var(--cream) 50%,
    var(--sand) 100%
  ) !important;
  background-size: 1200px 100% !important;
  animation: sol-shimmer 1.4s ease-in-out infinite !important;
}

/* Placeholder-текст для картинок.
 * Показується лише коли зображення немає (onerror).
 * Прихований через JS (display:none) після успішної загрузки.
 * Прихований під час skeleton через .sol-skeleton .img-ph { color: transparent } */
.img-ph {
  font-size: var(--text-s);
  letter-spacing: 0.08em;
  color: var(--gray-300);
  font-family: var(--font-body);
  user-select: none;
  pointer-events: none;
}
.sol-skeleton .img-ph { color: transparent; }

/* prefers-reduced-motion (a11y — вимкнути анімації для юзерів з вестибулярними розладами) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}