/*
 * UnitX Global Styles for Tilda.cc
 * ================================
 * 
 * Как использовать:
 * 1. В Tilda откройте настройки сайта → Ещё → HTML-код для HEAD
 * 2. Вставьте содержимое этого файла внутри ...
 * 
 * Или:
 * 1. Загрузите файл на хостинг
 * 2. Подключите через 
 */

/* ========================================
   CSS Variables (Цветовая палитра)
   ======================================== */

:root {
  /* Slate palette */
  --ux-slate-50: #f8fafc;
  --ux-slate-100: #f1f5f9;
  --ux-slate-200: #e2e8f0;
  --ux-slate-300: #cbd5e1;
  --ux-slate-400: #94a3b8;
  --ux-slate-500: #64748b;
  --ux-slate-600: #475569;
  --ux-slate-700: #334155;
  --ux-slate-800: #1e293b;
  --ux-slate-900: #0f172a;
  --ux-slate-950: #020617;
  
  /* Accent blue */
  --ux-blue-400: #60a5fa;
  --ux-blue-500: #3b82f6;
  --ux-blue-600: #2563eb;
  --ux-blue-700: #1d4ed8;
  
  /* Surfaces */
  --ux-surface-bg: #fcfcfd;
  --ux-surface-card: #ffffff;
  
  /* Borders */
  --ux-border-subtle: rgba(15, 23, 42, 0.06);
  --ux-border-medium: rgba(15, 23, 42, 0.1);
  --ux-border-strong: rgba(15, 23, 42, 0.15);
  
  /* Shadows */
  --ux-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --ux-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06);
  --ux-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.08);
  --ux-shadow-xl: 0 20px 60px rgba(15, 23, 42, 0.1);
  
  /* Typography */
  --ux-font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Border radius */
  --ux-radius-sm: 6px;
  --ux-radius-md: 10px;
  --ux-radius-lg: 16px;
  --ux-radius-xl: 20px;
}

/* ========================================
   Google Fonts Import
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ========================================
   Global Reset & Base
   ======================================== */

body,
#allrecords {
  font-family: var(--ux-font-main) !important;
  background-color: var(--ux-surface-bg) !important;
  color: var(--ux-slate-800) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Глобальный фон с сеткой */
#allrecords::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(59, 130, 246, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 100% 50%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 0% 80%, rgba(59, 130, 246, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

#allrecords::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(var(--ux-border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--ux-border-subtle) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 120% 100% at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 120% 100% at 50% 50%, black 20%, transparent 80%);
}

/* Все блоки поверх фона */
.t-rec,
.t-records {
  position: relative;
  z-index: 1;
}

/* ========================================
   Typography (Заголовки и текст)
   ======================================== */

/* Заголовки */
h1, .t-title,
h2, .t-subtitle,
h3, h4, h5, h6,
.t-heading,
[class*="tn-atom__heading"],
.t-card__title,
.t-name {
  font-family: var(--ux-font-main) !important;
  color: var(--ux-slate-900) !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
}

/* Основной текст */
p, .t-text,
.t-descr,
[class*="tn-atom__text"],
.t-card__descr,
.t-redactor__text {
  font-family: var(--ux-font-main) !important;
  color: var(--ux-slate-600) !important;
  line-height: 1.6 !important;
}

/* Мелкий текст */
.t-uptitle,
.t-caption,
small {
  font-family: var(--ux-font-main) !important;
  color: var(--ux-slate-500) !important;
  letter-spacing: 0.02em !important;
}

/* Акцентный цвет для выделения */
strong, b,
.t-text-highlight,
.ux-highlight {
  color: var(--ux-blue-600) !important;
  font-weight: 600 !important;
}

/* ========================================
   Links (Ссылки)
   ======================================== */

a,
.t-link {
  color: var(--ux-blue-600) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

a:hover,
.t-link:hover {
  color: var(--ux-blue-700) !important;
}

/* ========================================
   Buttons (Кнопки)
   ======================================== */

/* Основная кнопка (тёмная) */
.t-btn,
.t-submit,
[class*="tn-atom__btn"],
.t-form__submit {
  font-family: var(--ux-font-main) !important;
  background-color: var(--ux-slate-900) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--ux-radius-md) !important;
  padding: 14px 28px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
}

.t-btn:hover,
.t-submit:hover,
[class*="tn-atom__btn"]:hover,
.t-form__submit:hover {
  background-color: var(--ux-slate-800) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--ux-shadow-md) !important;
}

/* Вторичная кнопка (с обводкой) */
.t-btn_second,
.t-btn[style*="background-color: transparent"],
.t-btn[style*="background: transparent"] {
  background-color: transparent !important;
  color: var(--ux-slate-800) !important;
  border: 1px solid var(--ux-border-strong) !important;
}

.t-btn_second:hover,
.t-btn[style*="background-color: transparent"]:hover,
.t-btn[style*="background: transparent"]:hover {
  background-color: var(--ux-slate-100) !important;
  border-color: var(--ux-slate-300) !important;
  transform: translateY(-2px) !important;
}

/* ========================================
   Cards (Карточки)
   ======================================== */

.t-card,
.t-item,
.t-col__content,
[class*="tn-atom__card"],
.t-slds__item,
.t-store__card {
  background-color: var(--ux-surface-card) !important;
  border: 1px solid var(--ux-border-medium) !important;
  border-radius: var(--ux-radius-lg) !important;
  box-shadow: var(--ux-shadow-sm) !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
}

.t-card:hover,
.t-item:hover,
.t-col__content:hover,
[class*="tn-atom__card"]:hover,
.t-slds__item:hover,
.t-store__card:hover {
  box-shadow: var(--ux-shadow-lg) !important;
  border-color: var(--ux-slate-300) !important;
}

/* ========================================
   Forms (Формы)
   ======================================== */

/* Input поля */
.t-input,
.t-textarea,
.t-input-block input,
.t-input-block textarea,
.t-form__input,
select {
  font-family: var(--ux-font-main) !important;
  background-color: var(--ux-surface-card) !important;
  border: 1px solid var(--ux-border-medium) !important;
  border-radius: var(--ux-radius-md) !important;
  color: var(--ux-slate-800) !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  transition: all 0.2s ease !important;
}

.t-input:focus,
.t-textarea:focus,
.t-input-block input:focus,
.t-input-block textarea:focus,
.t-form__input:focus {
  border-color: var(--ux-blue-500) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  outline: none !important;
}

/* Placeholder */
.t-input::placeholder,
.t-textarea::placeholder {
  color: var(--ux-slate-400) !important;
}

/* Labels */
.t-input-title,
.t-form__label,
label {
  font-family: var(--ux-font-main) !important;
  color: var(--ux-slate-700) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* ========================================
   Navigation / Menu (Меню)
   ======================================== */

.t-menu,
.t-menuburger,
.t456,
.t228 {
  font-family: var(--ux-font-main) !important;
}

.t-menu__link-item,
.t-menusub__link-item {
  font-family: var(--ux-font-main) !important;
  color: var(--ux-slate-700) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  transition: color 0.2s ease !important;
}

.t-menu__link-item:hover,
.t-menusub__link-item:hover {
  color: var(--ux-blue-600) !important;
}

/* Активный пункт меню */
.t-menu__link-item.t-active,
.t-menusub__link-item.t-active {
  color: var(--ux-blue-600) !important;
}

/* Хедер */
.t228__wrapper,
.t456__wrapper,
[class*="t-cover__carrier"] {
  background-color: rgba(252, 252, 253, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--ux-border-subtle) !important;
}

/* ========================================
   Footer (Подвал)
   ======================================== */

.t-footer,
[class*="t-rec"][data-record-type="396"],
[class*="t-rec"][data-record-type="860"] {
  background-color: var(--ux-slate-900) !important;
}

.t-footer *,
[class*="t-rec"][data-record-type="396"] *,
[class*="t-rec"][data-record-type="860"] * {
  color: var(--ux-slate-300) !important;
}

.t-footer a:hover,
[class*="t-rec"][data-record-type="396"] a:hover {
  color: #ffffff !important;
}

/* ========================================
   Dividers & Lines (Разделители)
   ======================================== */

hr,
.t-divider,
[class*="tn-atom__divider"] {
  border-color: var(--ux-border-medium) !important;
  opacity: 1 !important;
}

/* ========================================
   Images (Изображения)
   ======================================== */

.t-img,
.t-slds__img,
.t-card__img,
.t-bgimg {
  border-radius: var(--ux-radius-md) !important;
}

/* ========================================
   Store / E-commerce (Магазин)
   ======================================== */

.t-store__card__title {
  font-family: var(--ux-font-main) !important;
  color: var(--ux-slate-900) !important;
  font-weight: 600 !important;
}

.t-store__card__price,
.t-store__card__price-value {
  font-family: var(--ux-font-main) !important;
  color: var(--ux-slate-800) !important;
  font-weight: 700 !important;
}

.t-store__card__price-old {
  color: var(--ux-slate-400) !important;
}

/* ========================================
   Popup / Modal (Попапы)
   ======================================== */

.t-popup,
.t-popup__container,
.t706__cartwin,
.t702__wrapper {
  background-color: var(--ux-surface-card) !important;
  border-radius: var(--ux-radius-xl) !important;
  border: 1px solid var(--ux-border-medium) !important;
  box-shadow: var(--ux-shadow-xl) !important;
}

.t-popup__close,
.t706__close,
.t702__close {
  color: var(--ux-slate-500) !important;
  transition: color 0.2s ease !important;
}

.t-popup__close:hover,
.t706__close:hover,
.t702__close:hover {
  color: var(--ux-slate-800) !important;
}

/* ========================================
   Utility Classes (Вспомогательные классы)
   ======================================== */

/* Фон карточки */
.ux-card-bg {
  background-color: var(--ux-surface-card) !important;
  border: 1px solid var(--ux-border-medium) !important;
  border-radius: var(--ux-radius-lg) !important;
  box-shadow: var(--ux-shadow-sm) !important;
}

/* Акцентный текст */
.ux-text-accent {
  color: var(--ux-blue-600) !important;
}

/* Серый текст */
.ux-text-muted {
  color: var(--ux-slate-500) !important;
}

/* Без фона */
.ux-no-bg {
  background: transparent !important;
}

/* Без границ */
.ux-no-border {
  border: none !important;
}

/* ========================================
   Animations (Анимации)
   ======================================== */

/* Плавное появление */
@keyframes ux-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ux-animate-up {
  animation: ux-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ========================================
   Scrollbar (Скроллбар)
   ======================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--ux-slate-100);
}

::-webkit-scrollbar-thumb {
  background: var(--ux-slate-300);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ux-slate-400);
}

/* ========================================
   Selection (Выделение текста)
   ======================================== */

::selection {
  background-color: rgba(59, 130, 246, 0.2);
  color: var(--ux-slate-900);
}

::-moz-selection {
  background-color: rgba(59, 130, 246, 0.2);
  color: var(--ux-slate-900);
}