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

:root {
  /* Акцентные цвета */
  --accent-red: #eb1700;
  --accent-main-blue: #01388c; /* Синий со скриншота Constructor Learn / app-index */

  /* Фоны */
  --bg-page: #FFFFFF; /* Основной фон страницы - белый */
  --bg-hero: #f0f2f8; /* Светло-серый фон для hero секции */
  --bg-section-blue: var(--accent-main-blue); /* Фон для синей секции */
  --bg-card: #FFFFFF; /* Фон карточек - белый */
  --bg-nav: #FFFFFF; /* Фон навигации */
  --bg-nav-scroll: rgba(255, 255, 255, 0.9); /* Фон навигации при скролле */
  --bg-footer: #f0f2f8; /* Светло-серый фон для футера */
  --bg-section-alt-light: #f0f2f8; /* Альтернативный светло-серый фон для секций */


  /* Текст */
  --text-on-light-primary: #141414;   /* Основной темный текст на светлом фоне */
  --text-on-light-secondary: #555555; /* Вторичный темный текст на светлом фоне */
  --text-on-dark-primary: #FFFFFF;    /* Основной светлый текст на темном фоне */
  --text-on-dark-secondary: #e0e0e0;  /* Вторичный светлый текст на темном фоне */

  /* Кнопки */
  --button-primary-bg-red: var(--accent-red);
  --button-primary-text-red: var(--text-on-dark-primary);
  --button-primary-hover-bg-red: #c01000; /* Более темный красный */

  --button-secondary-border-red: var(--accent-red);
  --button-secondary-text-red: var(--accent-red);
  --button-secondary-hover-bg-red: var(--accent-red);
  --button-secondary-hover-text-red: var(--text-on-dark-primary);
  
  /* Формы */
  --form-input-bg: #FFFFFF;
  --form-input-border: #D1D5DB; /* gray-300 */
  --form-input-text: var(--text-on-light-primary);
  --form-input-focus-border: var(--accent-red);
  --form-input-focus-shadow: rgba(235, 23, 0, 0.2);
  --placeholder-color: #A0AEC0; /* gray-400 / 500 */

  /* Удаляем старые переменные или комментируем, если они больше не нужны в этой теме */
  /* --accent-pink: #E4008C; */
  /* --accent-blue: #00b2ff; */ /* Старый голубой, заменен на --accent-main-blue */
  /* --dark-bg: #f0f2f8; */ /* Заменено на --bg-page, --bg-hero и т.д. */
  /* --text-color: #141414; */ /* Заменено на --text-on-light-primary и т.д. */
  /* --nav-scroll-bg: rgba(240, 242, 248, 0.8); */ /* Заменено на --bg-nav-scroll */
  /* --button-hover-bg-red: #c01000; */ /* Переименовано и уточнено */
  /* --secondary-cta-border: #A0AEC0; */
  /* --secondary-cta-hover-bg: #E2E8F0; */
  /* --placeholder-dark-color: #A0AEC0; */ /* Переименовано в --placeholder-color */
}

/* Base styles */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-page);
    color: var(--text-on-light-primary);
}

/* Navbar styles */
.sticky-nav {
    background-color: var(--bg-nav); /* Белый фон для навбара */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    backdrop-filter: blur(0px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Легкая тень для отделения от контента */
}

.sticky-nav.scrolled {
    background-color: var(--bg-nav-scroll);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
}

/* Custom text and background colors using new variables */
.text-accent-red {
    color: var(--accent-red);
}
.bg-accent-red {
    background-color: var(--accent-red);
}

.text-accent-main-blue {
    color: var(--accent-main-blue);
}
.bg-accent-main-blue {
    background-color: var(--accent-main-blue);
}

/* CTA Button styles */
.cta-button {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.cta-button:hover {
    transform: translateY(-2px);
}

/* Красные кнопки */
.primary-cta-button-red {
    background-color: var(--button-primary-bg-red);
    color: var(--button-primary-text-red);
}
.primary-cta-button-red:hover {
    background-color: var(--button-primary-hover-bg-red);
}

.secondary-cta-button-red {
    background-color: transparent;
    color: var(--button-secondary-text-red);
    border: 2px solid var(--button-secondary-border-red);
}
.secondary-cta-button-red:hover {
    background-color: var(--button-secondary-hover-bg-red);
    color: var(--button-secondary-hover-text-red);
}

/* Удаляем или адаптируем старые стили кнопок (розовые, голубые), если они не нужны */
.primary-cta-button-blue, .secondary-cta-button-blue, .text-accent-pink, .bg-accent-pink {
    /* Можно удалить или оставить закомментированными для будущих тем */
    /* display: none !important; */ /* Скрываем, если не удаляем */
}


/* Card and Section Backgrounds */
.card-base {
    background-color: var(--bg-card); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e2e8f0; /* Светло-серая граница для карточек */
    color: var(--text-on-light-primary); /* Текст на карточках темный */
}

.card-base:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* Чуть более заметная тень */
}

.highlight-card { /* Используется для "The Constructor Model Solution" */
    background-color: var(--bg-card); 
    border: 1px solid var(--accent-red);
    color: var(--text-on-light-primary);
}

.section-bg-alt { /* Для секций с альтернативным светло-серым фоном, если нужно */
    background-color: var(--bg-section-alt-light);
}

/* Hero Section (Темный фон как на Constructor Learn) */
.hero-bg-gradient {
    background-color: var(--bg-hero);
    color: var(--text-on-light-primary); /* Текст теперь темный */
}

/* Секция How It Works (Orchestrate...) будет синей */
#how-it-works {
    background-color: var(--bg-section-blue);
    color: var(--text-on-dark-primary);
}
#how-it-works h2, #how-it-works h3 {
    color: var(--text-on-dark-primary);
}
#how-it-works p {
    color: var(--text-on-dark-secondary); /* Более приглушенный светлый текст */
}
/* Стили для нумерованных кружков в синей секции */
#how-it-works .bg-accent-red { /* Если кружки должны быть красными на синем фоне */
    background-color: var(--accent-red);
    color: var(--text-on-dark-primary); /* Белый текст на красном кружке */
    box-shadow: 0 4px 12px rgba(235, 23, 0, 0.3); /* Тень для красных кружков */
}
/* Если кружки должны быть белыми на синем фоне с красным текстом (менее вероятно по скриншоту) */
/* #how-it-works .step-circle-on-blue {
    background-color: var(--text-on-dark-primary); // white
    color: var(--accent-red); // red number
} */


/* Footer Background */
.footer-bg {
    background-color: var(--bg-footer);
    color: var(--text-on-light-secondary); /* Приглушенный темный текст для футера */
}
.footer-bg h4 {
    color: var(--text-on-light-primary); /* Основной темный текст для заголовков в футере */
}
.footer-bg a:hover {
    color: var(--accent-red); /* Красный при наведении на ссылки в футере */
}


/* Gradient Feature Box - на скриншоте Constructor Learn нет такого элемента */
/* Если он остается, его нужно адаптировать. Пока сделаем его светлым. */
.gradient-feature-box {
    background-color: var(--bg-card);
    border: 1px solid var(--accent-main-blue); /* Или красный, если акцент на нем */
    color: var(--text-on-light-primary);
}
.gradient-feature-box h3 {
    color: var(--accent-main-blue); /* Или красный */
}
.gradient-feature-box p {
    color: var(--text-on-light-secondary);
}
.gradient-feature-box a.cta-button { /* Кнопка внутри этого блока */
    background-color: var(--accent-red);
    color: var(--text-on-dark-primary);
}
.gradient-feature-box a.cta-button:hover {
    background-color: var(--button-primary-hover-bg-red);
}


/* Form Input styles */
.form-input {
    background-color: var(--form-input-bg);
    border: 1px solid var(--form-input-border);
    color: var(--form-input-text);
}
.form-input:focus {
    outline: none;
    border-color: var(--form-input-focus-border);
    box-shadow: 0 0 0 2px var(--form-input-focus-shadow);
}
.form-input::placeholder {
    color: var(--placeholder-color);
}
.placeholder-dark::placeholder { /* Если этот класс все еще используется */
    color: var(--placeholder-color);
}

/* Icon colors */
/* Нужно будет пересмотреть цвета иконок на соответствие новому темному/светлому фону */
.icon-problem { /* На светлом фоне */
    color: #EF4444; /* red-500, нормально */
}
.icon-solution { /* На светлом фоне */
    color: #10B981; /* green-500, нормально */
}
.icon-feature-app { /* На карточках (светлый фон) - красный акцент */
    color: var(--accent-red);
}
.icon-gateway { /* В .gradient-feature-box - если он синий, то иконка может быть белой или синей */
                 /* Если .gradient-feature-box светлый, иконка должна быть акцентной */
    color: var(--accent-main-blue); /* Пока так, для светлого фона блока */
}

/* Custom scrollbar for light theme */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #e2e8f0; /* Светло-серый трек */
}
::-webkit-scrollbar-thumb {
    background: #cbd5e0; /* Более темный серый для ползунка */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a0aec0; /* Еще темнее серый при наведении */
}

#mobile-menu {
    transition: transform 0.3s ease-in-out;
    background-color: var(--bg-nav); /* Белый фон для мобильного меню */
    border-top: 1px solid #e2e8f0; /* Разделитель */
}
#mobile-menu a {
    color: var(--text-on-light-secondary);
}
#mobile-menu a:hover {
    background-color: var(--bg-footer); /* Светло-серый фон при наведении */
    color: var(--accent-red);
}
#mobile-menu .secondary-cta-button-red { /* Кнопка в мобильном меню */
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Specific adjustments for sections to ensure white background if not hero or blue section */
#problem-solution, 
#features,
#use-cases,
#social-proof,
#why-us,
#contact {
    background-color: var(--bg-page); /* Белый фон */
    color: var(--text-on-light-primary); /* Темный текст */
}

/* Текстовые элементы в этих секциях */
#problem-solution h2, #problem-solution h3,
#features h2, #features h3, #features h4,
#use-cases h2, #use-cases h3,
#social-proof h2, #social-proof h3, #social-proof p,
#why-us h2, #why-us h3,
#contact h2 {
    color: var(--text-on-light-primary);
}

#problem-solution p, 
#features p,
#use-cases p,
#why-us p,
#contact p {
    color: var(--text-on-light-secondary);
}

/* Ссылки в why-us и других местах, если они не кнопки */
#features a:not(.cta-button),
#why-us a:not(.cta-button),
#contact a:not(.cta-button) {
    color: var(--accent-red);
}
#features a:not(.cta-button):hover,
#why-us a:not(.cta-button):hover,
#contact a:not(.cta-button):hover {
    text-decoration: underline;
    color: var(--button-primary-hover-bg-red);
}

/* Логотипы партнеров в social-proof */
#social-proof img {
    filter: grayscale(50%) opacity(70%); /* Делаем их менее навязчивыми */
}
#social-proof img:hover {
    filter: grayscale(0%) opacity(100%);
}

/* Для секции why-us карточки могут иметь чуть другой фон или рамку */
#why-us .card-base {
    background-color: var(--bg-section-alt-light); /* Светло-серый фон для этих карточек */
    border: 1px solid var(--accent-main-blue); /* Синяя рамка */
}
#why-us .card-base h3 {
    color: var(--accent-main-blue); /* Синий заголовок */
}