/* =========================================================
   ЦЕНТРАЛІЗОВАНА СИСТЕМА ТЕМ ТА ОСНОВНИХ КОЛЬОРІВ

   Для нової теми — визначте лише примітивні токени (--_*).
   Всі інші змінні виводяться автоматично.
   Доступні теми: vivid, soft, dark

   Шаблон нової теми:
     :root[data-theme='my-theme'] {
       --theme-name: 'Моя тема';
       --_bg:             #…;
       --_bg-soft:        #…;
       --_surface:        #…;
       --_surface-soft:   #…;
       --_surface-accent: #…;
       --_text:           #…;
       --_text-soft:      #…;
       --_primary:        #…;
       --_secondary:      #…;
       --_highlight:      #…;
       --_promo:          #…;
       --_price-old:      #…;
       --_pill-bg:        rgba(…);
       --_input-bg:       rgba(…);
       --_topbar-bg:      rgba(…);
       --gradient-page:   …;
     }
   ========================================================= */

/* --- Примітивні токени: тільки їх треба міняти для нової теми --- */

:root,
:root[data-theme='vivid'] {
  --theme-name: 'Яскрава';
  --_bg: #fff5ee;
  --_bg-soft: #fffdfb;
  --_surface: #ffffff;
  --_surface-soft: #fff2ea;
  --_surface-accent: #ffe4d5;
  --_text: #241f1b;
  --_text-soft: #6f5548;
  --_primary: #ff3b3f;
  --_secondary: #ff7a1a;
  --_highlight: #ffae42;
  --_promo: #ff6273;
  --_price-old: #916b5a;
  --_pill-bg: rgba(255, 255, 255, 0.76);
  --_input-bg: rgba(255, 255, 255, 0.88);
  --_topbar-bg: rgba(255, 245, 238, 0.9);
  --gradient-page:
    radial-gradient(circle at top center, rgba(255, 59, 63, 0.18), transparent 26%),
    radial-gradient(circle at 12% 18%, rgba(255, 122, 26, 0.14), transparent 18%),
    radial-gradient(circle at 88% 14%, rgba(255, 174, 66, 0.16), transparent 14%),
    linear-gradient(180deg, #fff5ee 0%, #ffece1 100%);
}

:root[data-theme='soft'] {
  --theme-name: 'Світла';
  --_bg: #fff8f2;
  --_bg-soft: #fffdfa;
  --_surface: #ffffff;
  --_surface-soft: #fff7f0;
  --_surface-accent: #ffeede;
  --_text: #2a241f;
  --_text-soft: #7d6657;
  --_primary: #ff5a47;
  --_secondary: #ff9b3d;
  --_highlight: #ffc857;
  --_promo: #ff7d7d;
  --_price-old: #9d7e6e;
  --_pill-bg: rgba(255, 255, 255, 0.82);
  --_input-bg: rgba(255, 255, 255, 0.94);
  --_topbar-bg: rgba(255, 248, 242, 0.9);
  --gradient-page:
    radial-gradient(circle at top center, rgba(255, 90, 71, 0.12), transparent 26%),
    radial-gradient(circle at 14% 18%, rgba(255, 155, 61, 0.1), transparent 18%),
    radial-gradient(circle at 88% 14%, rgba(255, 200, 87, 0.12), transparent 14%),
    linear-gradient(180deg, #fff8f2 0%, #fff0e6 100%);
}

:root[data-theme='dark'] {
  --theme-name: 'Темна';
  --_bg: #171413;
  --_bg-soft: #1e1a18;
  --_surface: #211c19;
  --_surface-soft: #2a221f;
  --_surface-accent: #342721;
  --_text: #fff4ea;
  --_text-soft: #d8b8a6;
  --_primary: #ff5b5f;
  --_secondary: #ff9d38;
  --_highlight: #ffc857;
  --_promo: #ff7b8e;
  --_price-old: #f1c3b0;
  --_pill-bg: rgba(255, 255, 255, 0.05);
  --_input-bg: rgba(255, 255, 255, 0.06);
  --_topbar-bg: rgba(24, 20, 18, 0.92);
  --gradient-page:
    radial-gradient(circle at top center, rgba(255, 91, 95, 0.16), transparent 28%),
    radial-gradient(circle at 12% 18%, rgba(255, 157, 56, 0.14), transparent 18%),
    radial-gradient(circle at 88% 14%, rgba(255, 200, 87, 0.1), transparent 14%),
    linear-gradient(180deg, #171413 0%, #1b1614 100%);
}

/* --- Семантичні токени: визначаються один раз, не повторюються в темах --- */

:root {
  /* Розміри */
  --container: 1024px;
  --radius: 28px;
  --radius-sm: 18px;

  /* Базові кольори */
  --color-page-bg: var(--_bg);
  --color-page-bg-soft: var(--_bg-soft);
  --color-card-bg: var(--_surface);
  --color-card-bg-soft: var(--_surface-soft);
  --color-card-accent-bg: var(--_surface-accent);
  --color-topbar-bg: var(--_topbar-bg);
  --color-text-main: var(--_text);
  --color-text-soft-main: var(--_text-soft);
  --color-text-on-accent-main: #ffffff;

  /* Акценти */
  --color-accent-main: var(--_primary);
  --color-accent-hover: color-mix(in srgb, var(--_primary) 88%, black);
  --color-accent-secondary: var(--_secondary);
  --color-accent-secondary-soft: color-mix(in srgb, var(--_secondary) 28%, white);
  --color-accent-highlight: var(--_highlight);
  --color-accent-promo: var(--_promo);

  /* Лінії та прозорі фони */
  --color-line-main: color-mix(in srgb, var(--_secondary) 18%, transparent);
  --color-pill-bg: var(--_pill-bg);
  --color-input-bg: var(--_input-bg);

  /* Тіні (автоматично відповідають кольору акценту) */
  --shadow-soft: 0 18px 42px color-mix(in srgb, var(--_primary) 14%, transparent);
  --shadow-strong: 0 16px 34px color-mix(in srgb, var(--_primary) 26%, transparent);
  --shadow-button: 0 14px 28px color-mix(in srgb, var(--_primary) 28%, transparent);

  /* Ціна */
  --color-price-old-text: var(--_price-old);
  --color-price-old-border: color-mix(in srgb, var(--_promo) 45%, transparent);
  --color-price-new-text: #ffffff;
  --gradient-price-new: linear-gradient(135deg, var(--_primary), var(--_secondary));

  /* Градієнти (автоматично відповідають акцентам) */
  --gradient-card: linear-gradient(
    180deg,
    color-mix(in srgb, var(--_surface) 98%, transparent),
    color-mix(in srgb, var(--_bg) 96%, transparent)
  );
  --gradient-accent: linear-gradient(135deg, var(--_primary), var(--_secondary));
  --gradient-accent-soft: linear-gradient(
    135deg,
    color-mix(in srgb, var(--_secondary) 20%, transparent),
    color-mix(in srgb, var(--_primary) 13%, transparent)
  );
  --gradient-step: linear-gradient(135deg, var(--_secondary), var(--_primary));

  /* Сумісність зі старими назвами змінних */
  --shadow: var(--shadow-soft);
  --color-bg: var(--color-page-bg);
  --color-bg-soft: var(--color-page-bg-soft);
  --color-surface: var(--color-card-bg);
  --color-surface-soft: var(--color-card-bg-soft);
  --color-surface-accent: var(--color-card-accent-bg);
  --color-topbar: var(--color-topbar-bg);
  --color-text: var(--color-text-main);
  --color-text-soft: var(--color-text-soft-main);
  --color-text-on-accent: var(--color-text-on-accent-main);
  --color-line: var(--color-line-main);
  --color-gold: var(--color-accent-secondary);
  --color-gold-soft: var(--color-accent-secondary-soft);
  --color-pink: var(--color-accent-promo);
  --color-pink-strong: var(--color-accent-main);
  --color-blue: #d9ecff;
  --color-green: #d4f3c1;
  --color-yellow: var(--color-accent-highlight);
  --color-purple: #ffd9e5;
  --color-orange: var(--color-accent-secondary);
  --color-stock: #8a322a;
  --color-on-warning: var(--color-text-main);
  --color-on-success: var(--color-text-main);
}

:root[data-theme='dark'] {
  --color-green: rgb(41 116 121);
  --color-stock: #c4483d;
  --color-on-warning: #241f1b;
  --color-on-success: #ffffff;
}