@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --black: #323232;
  --white: #ffffff;
  --gray: #9A9A9A;
  --red: #FF0000;
  --gray-dark: #6f6f6f;
  --gray-light: #E5E5EA;
  /* Основные переменные */
  --border: var(--black);
  --ring: var(--black);
  
  /* Типографика */
  --font-family: 'Manrope', sans-serif;
  --font-family-bold: 'Britannic Bold', sans-serif;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;  
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
}

@layer base {
  * {
    border-color: var(--border);
  }

  body {
    background: var(--white);
    color: var(--black);
    font-family: var(--font-family);
  }
}

@layer components {
  /* Система типографики из Figma */
  
  .text-header-1 {
    font-size: 48px;
    font-weight: var(--font-weight-extrabold);
    line-height: 66px;
    font-family: var(--font-family);
  }

  .text-header-2 {
    font-size: 40px;
    font-weight: var(--font-weight-extrabold);
    line-height: 54.6px;
    font-family: var(--font-family);
  }
  
  .text-subhead {
    font-size: 22px;
    font-weight: var(--font-weight-light);
    line-height: 30.1px;
    font-family: var(--font-family);
  }

  /* Мобильные стили */
  @media (max-width: 768px) {
    .text-header-1 {
      font-size: 28px;
      line-height: 38px;
    }

    .text-header-2 {
      font-size: 24px;
      line-height: 32px;
    }
    
    .text-subhead {
      font-size: 16px;
      line-height: 22px;
    }

    .text-square-header {
      font-size: 18px;
      line-height: 24px;
    }

    .text-square-body {
      font-size: 14px;
      line-height: 20px;
    }

    .text-landing-ul {
      font-size: 18px;
      line-height: 26px;
    }
  }

  /* Квадратики */

  .text-square-header {
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    line-height: 27.3px;
    font-family: var(--font-family);
  }

  .text-square-body {
    font-size: 16px;
    font-weight: var(--font-weight-regular);
    line-height: 150%;
    font-family: var(--font-family);
  }

  .text-breadcrumbs {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    line-height: 17px;
    font-family: var(--font-family);
    color: #9A9A9A;
  }
  
  .text-menu-button {
    font-size: 1.5rem;
    font-weight: var(--font-weight-regular);
    line-height: auto;
    font-family: var(--font-family-bold);
  }

  .text-landing-ul {
    font-size: 24px;
    font-weight: var(--font-weight-extrabold);
    line-height: 42px;
    font-family: var(--font-family);
  }

  .text-bb-r {
    font-size: 32px;
    font-weight: var(--font-weight-regular);
    line-height: auto;
    font-family: var(--font-family-bold);
  }
  
  .text-client-header {
    font-size: 32px;
    font-weight: var(--font-weight-extrabold);
    line-height: auto;
    font-family: var(--font-family);
  }
  
  .text-client-description, .prose-tight {
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    line-height: 30px;
    font-family: var(--font-family);
  }
  
  .text-small-card-header, .text-button {
    font-size: 24px;
    font-weight: var(--font-weight-regular);
    line-height: auto;
    font-family: var(--font-family-bold);
  }
  
  .text-small-card-text {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: auto;
    font-family: var(--font-family);
  }
  
  .text-input-field {
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    line-height: auto;
    font-family: var(--font-family);
  }
  
  .text-input-hint, .text-input-placeholder {
    font-size: 20px;
    font-weight: var(--font-weight-light);
    line-height: auto;
    font-family: var(--font-family);
  }

  .text-footer {
    font-size: 12px;
    line-height: 17px;
  }

  .text-collection-title, .text-input-label {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 27px;
    font-family: var(--font-family);
  }

  .text-collection-info, .text-input-info {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 22px;
    font-family: var(--font-family);
  }

  .text-black {
    color: var(--black);
  }

  .text-gray {
    color: var(--gray);
  }

  .text-white {
    color: var(--white);
  }

  .text-red {
    color: var(--red);
  }

  .text-gray-dark {
    color: var(--gray-dark);
  }

  .text-gray-light {
    color: var(--gray-light);
  }
}

@layer utilities {
  .button {
    display: flex;
    height: 46px;
    align-items: center;
    justify-items: center;
    padding: 0 16px;
    background-color: var(--black);
    color: var(--white);
    font-family: var(--font-family);
    font-size: 20px;
    line-height: 27.3px;
    font-weight: var(--font-weight-medium);
  }
  
  .button.white {
    background-color: var(--white);
    color: var(--black);
    border: 2px solid var(--black);
  }

  .button.disabled {
    background-color: var(--gray);
    color: var(--white);
    border: 2px solid var(--gray);
  }
  
  .card {
    background-color: var(--white);
    border: 2px solid var(--black);
    border-radius: 2px;
    padding: 36px 30px;
    width: 320px;
    gap: 16px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
  }
  
  .card.black {
    background-color: var(--black);
    color: var(--white);
    border: none;
    width: 220px;
    padding: 20px 24px;
  }

  /* Мобильные стили для карточек */
  @media (max-width: 768px) {
    .card {
      width: 100%;
      max-width: 320px;
      padding: 24px 20px;
      margin-bottom: 16px;
    }
    
    .card.black {
      width: 100%;
      max-width: 220px;
      padding: 16px 18px;
      margin-bottom: 16px;
    }
  }

  /* Мобильное меню */
  .mobile-menu {
    animation: slideDown 0.3s ease-out;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Wallet dropdown styles */
  .wallet-dropdown {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  .wallet-dropdown button:hover {
    background-color: #f3f4f6;
  }

  /* Hide scrollbar for horizontal scroll */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
  }
  
  .step-active {
    background-color: var(--black);
  }
  
  .step-inactive {
    background-color: var(--gray);
  }

  /* Markdown Editor Styles */
  .w-md-editor {
    background-color: var(--white) !important;
  }
  
  .w-md-editor-text-input, 
  .w-md-editor-text {
    color: var(--black) !important;
    font-family: var(--font-family) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  
  .w-md-editor-text-input::placeholder {
    color: var(--gray) !important;
  }
  
  .w-md-editor .w-md-editor-toolbar {
    border-bottom: 1px solid #D1D5DB !important;
    background-color: #F9FAFB !important;
  }
  
  .w-md-editor .w-md-editor-toolbar button {
    color: var(--black) !important;
  }
  
  .w-md-editor .w-md-editor-toolbar button:hover {
    background-color: #E5E7EB !important;
  }
  
  .w-md-editor-preview {
    background-color: var(--white) !important;
    color: var(--black) !important;
    font-family: var(--font-family) !important;
  }

  /* Line clamp utilities */
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* React Markdown Editor Lite Styles */
  .markdown-editor-wrapper {
    height: 100% !important;
  }

  .markdown-editor-wrapper .rc-md-editor {
    border: 1px solid var(--black) !important;
    border-radius: 2px !important;
    background: var(--white) !important;
    height: 100% !important;
  }

  .markdown-editor-wrapper .rc-md-navigation {
    background: var(--white) !important;
    border-bottom: 1px solid var(--black) !important;
    padding: 8px !important;
  }

  .markdown-editor-wrapper .rc-md-navigation .button {
    background: var(--white) !important;
    border: 1px solid var(--black) !important;
    border-radius: 2px !important;
    color: var(--black) !important;
    margin: 0 2px !important;
    padding: 4px 8px !important;
    font-size: 14px !important;
    font-family: var(--font-family) !important;
    height: auto !important;
    min-width: auto !important;
  }

  .markdown-editor-wrapper .rc-md-navigation .button:hover {
    background: var(--black) !important;
    color: var(--white) !important;
  }

  .markdown-editor-wrapper .rc-md-navigation .button.selected {
    background: var(--black) !important;
    color: var(--white) !important;
  }

  .markdown-editor-wrapper .rc-md-editor .section {
    border-right: 1px solid var(--black) !important;
  }

  .markdown-editor-wrapper .rc-md-editor .editor-container textarea {
    background: var(--white) !important;
    color: var(--black) !important;
    font-family: var(--font-family) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    border: none !important;
    outline: none !important;
    padding: 16px !important;
  }

  .markdown-editor-wrapper .rc-md-editor .custom-html-style {
    background: var(--white) !important;
    color: var(--black) !important;
    font-family: var(--font-family) !important;
    padding: 16px !important;
  }

  /* Стили для списков в preview */
  .markdown-editor-wrapper .rc-md-editor .custom-html-style ul {
    list-style-type: disc !important;
    margin-left: 20px !important;
    margin-bottom: 16px !important;
    padding-left: 0 !important;
  }

  .markdown-editor-wrapper .rc-md-editor .custom-html-style ol {
    list-style-type: decimal !important;
    margin-left: 20px !important;
    margin-bottom: 16px !important;
    padding-left: 0 !important;
  }

  .markdown-editor-wrapper .rc-md-editor .custom-html-style li {
    margin-bottom: 4px !important;
    line-height: 1.5 !important;
  }

  /* Вложенные списки */
  .markdown-editor-wrapper .rc-md-editor .custom-html-style ul ul {
    list-style-type: circle !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  .markdown-editor-wrapper .rc-md-editor .custom-html-style ul ul ul {
    list-style-type: square !important;
  }

  /* Стили для цитат */
  .markdown-editor-wrapper .rc-md-editor .custom-html-style blockquote {
    border-left: 4px solid var(--gray) !important;
    margin: 16px 0 !important;
    padding: 8px 16px !important;
    background-color: #f9f9f9 !important;
    font-style: italic !important;
  }

  /* Стили для заголовков в preview */
  .markdown-editor-wrapper .rc-md-editor .custom-html-style h1,
  .markdown-editor-wrapper .rc-md-editor .custom-html-style h2,
  .markdown-editor-wrapper .rc-md-editor .custom-html-style h3,
  .markdown-editor-wrapper .rc-md-editor .custom-html-style h4,
  .markdown-editor-wrapper .rc-md-editor .custom-html-style h5,
  .markdown-editor-wrapper .rc-md-editor .custom-html-style h6 {
    font-family: var(--font-family) !important;
    font-weight: var(--font-weight-bold) !important;
    margin: 16px 0 8px 0 !important;
    line-height: 1.3 !important;
  }

  .markdown-editor-wrapper .rc-md-editor .custom-html-style h1 { font-size: 28px !important; }
  .markdown-editor-wrapper .rc-md-editor .custom-html-style h2 { font-size: 24px !important; }
  .markdown-editor-wrapper .rc-md-editor .custom-html-style h3 { font-size: 20px !important; }
  .markdown-editor-wrapper .rc-md-editor .custom-html-style h4 { font-size: 18px !important; }
  .markdown-editor-wrapper .rc-md-editor .custom-html-style h5 { font-size: 16px !important; }
  .markdown-editor-wrapper .rc-md-editor .custom-html-style h6 { font-size: 14px !important; }

  /* Стили для параграфов */
  .markdown-editor-wrapper .rc-md-editor .custom-html-style p {
    margin: 8px 0 !important;
    line-height: 1.5 !important;
  }

  /* Скрываем ненужные кнопки в toolbar */
  .markdown-editor-wrapper .rc-md-navigation .button-wrap {
    display: flex !important;
    gap: 4px !important;
  }

  /* Скрываем средние кнопки (код, ссылки, изображения, таблицы) по позиции */
  .markdown-editor-wrapper .rc-md-navigation .button:nth-child(9),
  .markdown-editor-wrapper .rc-md-navigation .button:nth-child(10),
  .markdown-editor-wrapper .rc-md-navigation .button:nth-child(11),
  .markdown-editor-wrapper .rc-md-navigation .button:nth-child(12),
  .markdown-editor-wrapper .rc-md-navigation .button:nth-child(13),
  .markdown-editor-wrapper .rc-md-navigation .button:nth-child(14),
  .markdown-editor-wrapper .rc-md-navigation .button:nth-child(15) {
    display: none !important;
  }

  /* Показываем первые 8 кнопок (базовое форматирование + списки + цитаты) */
  .markdown-editor-wrapper .rc-md-navigation .button:nth-child(-n+8) {
    display: inline-flex !important;
  }

  /* Показываем последние 2 кнопки (отмена/повтор) */
  .markdown-editor-wrapper .rc-md-navigation .button:last-child,
  .markdown-editor-wrapper .rc-md-navigation .button:nth-last-child(2) {
    display: inline-flex !important;
  }

  /* Ограничение ширины для предотвращения длинных строк */
  .markdown-editor-wrapper .rc-md-editor .section-container {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
  }

  .markdown-editor-wrapper .rc-md-editor .section-container .input {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
  }

  .markdown-editor-wrapper .rc-md-editor .section-container .html-section {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
  }

  .markdown-editor-wrapper .rc-md-editor .editor-container textarea {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
  }

  .markdown-editor-wrapper .rc-md-editor .custom-html-style {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
  }

  .markdown-editor-wrapper .rc-md-editor .drop-wrap {
    color: var(--black) !important;
  }

  .Toastify__close-button {
    color: var(--black) !important;
  }
  
  .prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
    color: inherit !important;
  }
}

/* Добавить эти стили для CollectionCard */
.prose * {
  color: inherit !important;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6,
.prose p, .prose ul, .prose ol, .prose li, .prose blockquote,
.prose code, .prose pre, .prose strong, .prose em, .prose a {
  color: inherit !important;
}

/* Специально для маркеров списков */
.prose ul li::marker,
.prose ol li::marker {
  color: inherit !important;
}

/* Альтернативный способ для старых браузеров */
.prose ul li {
  list-style-color: inherit !important;
}

.prose ol li {
  list-style-color: inherit !important;
}

/* Scroll to top button */
.scroll-to-top-button {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  background-color: var(--black);
  color: var(--white);
  padding: 12px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease-in-out;
  transform: translateY(0);
  opacity: 1;
}

.scroll-to-top-button:hover {
  background-color: #333;
  transform: scale(1.1);
}

.scroll-to-top-button:active {
  transform: scale(0.95);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .scroll-to-top-button {
    bottom: 16px;
    right: 16px;
    padding: 10px;
  }
}