/* Маркетплейс aulov — дизайн-токены.
 *
 * Единственное место, где заданы цвета, радиусы, тени и тайминги. Компоненты
 * обращаются только к переменным: иначе тёмная тема разъезжается там, где
 * кто-то один раз написал цвет руками.
 *
 * Тем две: белая-фиолетовая и чёрная-фиолетовая. Переключение — атрибутом
 * data-theme на <html>. Значение "auto" отдаёт решение системе/Telegram.
 */

:root {
  /* --- Фиолетовый акцент. Один и тот же в обеих темах: это лицо бренда,
         и он специально подобран так, чтобы читаться и на белом, и на чёрном. --- */
  --brand-50:  #F3EFFF;
  --brand-100: #E6DEFF;
  --brand-200: #CFC0FF;
  --brand-300: #B49BFF;
  --brand-400: #9878FF;
  --brand-500: #7C5CFF;   /* основной */
  --brand-600: #6A45F5;
  --brand-700: #5733DB;
  --brand-800: #4527AE;
  --brand-900: #331C80;

  --accent-grad: linear-gradient(135deg, #9878FF 0%, #7C5CFF 45%, #6A45F5 100%);
  --accent-grad-soft: linear-gradient(135deg, rgba(152,120,255,.16), rgba(106,69,245,.10));

  /* --- Семантические цвета --- */
  --success-500: #22C55E;
  --success-bg:  #E8FAEF;
  --warning-500: #F59E0B;
  --warning-bg:  #FEF3E2;
  --danger-500:  #EF4444;
  --danger-bg:   #FDECEC;
  --info-500:    #3B82F6;
  --info-bg:     #E8F1FE;

  /* --- Геометрия --- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-full: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* Высоты кнопок. Требование к проекту — крупные и удобные, но не
     раздутые: 52px это комфортный палец и при этом не «кирпич». */
  --btn-h-lg: 54px;
  --btn-h-md: 48px;
  --btn-h-sm: 40px;
  --tap-min: 44px;   /* минимальная зона нажатия для любых иконок */

  --nav-h: 68px;
  --header-h: 56px;
  --maxw: 640px;

  /* --- Типографика --- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Pro Display", -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: 30px;
  --fs-h1: 24px;
  --fs-h2: 20px;
  --fs-h3: 17px;
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-xs: 11px;

  --lh-tight: 1.2;
  --lh-body: 1.45;

  /* --- Движение ---
     Одна пружина на всё приложение: одинаковый «характер» анимаций читается
     как качество, разнобой таймингов — как самодельность. */
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 420ms;

  --z-nav: 100;
  --z-header: 90;
  --z-sheet: 200;
  --z-toast: 300;
  --z-modal: 400;
}

/* ================= СВЕТЛАЯ ТЕМА (по умолчанию) ================= */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg:           #FFFFFF;
  --bg-elevated:  #FFFFFF;
  --surface:      #FFFFFF;
  --surface-2:    #F7F5FC;
  --surface-3:    #F1EEF9;
  --surface-sunken:#FAF9FE;

  --text:         #16131F;
  --text-2:       #4A4560;
  --text-muted:   #7C7792;
  --text-inverse: #FFFFFF;
  --text-on-brand:#FFFFFF;

  --border:       #ECE8F6;
  --border-strong:#DCD5EE;

  --brand:        var(--brand-500);
  --brand-hover:  var(--brand-600);
  --brand-soft:   var(--brand-50);
  --brand-soft-2: var(--brand-100);
  --brand-text:   var(--brand-600);

  --shadow-sm: 0 1px 2px rgba(22, 19, 31, .05), 0 1px 3px rgba(22, 19, 31, .04);
  --shadow-md: 0 4px 12px rgba(22, 19, 31, .06), 0 2px 4px rgba(22, 19, 31, .04);
  --shadow-lg: 0 12px 32px rgba(22, 19, 31, .10), 0 4px 8px rgba(22, 19, 31, .05);
  --shadow-brand: 0 8px 24px rgba(124, 92, 255, .28);
  /* Для карточек, у которых фон равен фону страницы (белый на белом) —
     чуть плотнее и контрастнее --shadow-sm, но с более узким радиусом
     размытия, чем --shadow-md, чтобы в плотной сетке с зазором 8px тени
     соседних карточек не сливались в одно пятно. */
  --shadow-float: 0 3px 10px rgba(22, 19, 31, .09), 0 1px 3px rgba(22, 19, 31, .06);

  --skeleton: linear-gradient(90deg, #F1EEF9 25%, #E8E3F5 50%, #F1EEF9 75%);
  --backdrop: rgba(22, 19, 31, .42);
  --glass: rgba(255, 255, 255, .78);
  --aurora-1: rgba(124, 92, 255, .22);
  --aurora-2: rgba(180, 155, 255, .18);
  /* Блик поисковой плашки на каталоге. Яркость держим на токене темы, а не
     фиксированным rgba: тот же белый блик на тёмном фоне читался бы как
     баг, а не как отсвет. */
  --sheen: rgba(255, 255, 255, .60);
}

/* ================= ТЁМНАЯ ТЕМА ================= */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:           #0A0910;
  --bg-elevated:  #12101C;
  --surface:      #14121F;
  --surface-2:    #1B1830;
  --surface-3:    #241F3D;
  --surface-sunken:#0E0C15;

  --text:         #F5F3FF;
  --text-2:       #C4BEDF;
  --text-muted:   #8B85A8;
  --text-inverse: #16131F;
  --text-on-brand:#FFFFFF;

  --border:       #262138;
  --border-strong:#342D4D;

  --brand:        #8B6BFF;
  --brand-hover:  #9C81FF;
  --brand-soft:   rgba(139, 107, 255, .14);
  --brand-soft-2: rgba(139, 107, 255, .22);
  --brand-text:   #A98FFF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .48);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .58);
  --shadow-brand: 0 8px 28px rgba(124, 92, 255, .38);
  --shadow-float: 0 3px 10px rgba(0, 0, 0, .38), 0 1px 3px rgba(0, 0, 0, .28);

  --skeleton: linear-gradient(90deg, #1B1830 25%, #262138 50%, #1B1830 75%);
  --backdrop: rgba(0, 0, 0, .62);
  --glass: rgba(20, 18, 31, .78);
  --aurora-1: rgba(124, 92, 255, .28);
  --aurora-2: rgba(90, 60, 200, .22);
  /* На тёмном фоне яркий белый блик читался бы как баг — приглушаем. */
  --sheen: rgba(255, 255, 255, .08);

  --success-bg: rgba(34, 197, 94, .14);
  --warning-bg: rgba(245, 158, 11, .14);
  --danger-bg:  rgba(239, 68, 68, .14);
  --info-bg:    rgba(59, 130, 246, .14);
}

/* Режим "auto": наследуем от системы, если пользователь не выбрал тему явно.
   Значения продублированы, а не унаследованы, потому что CSS не умеет
   применять один селектор к другому. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --bg: #0A0910;
    --bg-elevated: #12101C;
    --surface: #14121F;
    --surface-2: #1B1830;
    --surface-3: #241F3D;
    --surface-sunken: #0E0C15;
    --text: #F5F3FF;
    --text-2: #C4BEDF;
    --text-muted: #8B85A8;
    --text-inverse: #16131F;
    --border: #262138;
    --border-strong: #342D4D;
    --brand: #8B6BFF;
    --brand-hover: #9C81FF;
    --brand-soft: rgba(139, 107, 255, .14);
    --brand-soft-2: rgba(139, 107, 255, .22);
    --brand-text: #A98FFF;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .48);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .58);
    --shadow-float: 0 3px 10px rgba(0, 0, 0, .38), 0 1px 3px rgba(0, 0, 0, .28);
    --skeleton: linear-gradient(90deg, #1B1830 25%, #262138 50%, #1B1830 75%);
    --backdrop: rgba(0, 0, 0, .62);
    --glass: rgba(20, 18, 31, .78);
    --aurora-1: rgba(124, 92, 255, .28);
    --aurora-2: rgba(90, 60, 200, .22);
    --sheen: rgba(255, 255, 255, .08);
    --success-bg: rgba(34, 197, 94, .14);
    --warning-bg: rgba(245, 158, 11, .14);
    --danger-bg: rgba(239, 68, 68, .14);
    --info-bg: rgba(59, 130, 246, .14);
  }
}

/* Смена темы не должна мигать: красим переход, но только у крупных
   поверхностей — анимировать цвет у каждого элемента дорого. */
:root.theme-switching,
:root.theme-switching body,
:root.theme-switching .surface-anim {
  transition: background-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}