/**
 * @file: design-tokens.css
 * @description: Единый файл дизайн-токенов NFS AUTO.
 * Подключается ПЕРВЫМ во всех шаблонах. Все CSS-файлы проекта
 * должны ссылаться на эти переменные вместо собственных :root.
 */

:root {
    /* === Бренд-цвета NFS AUTO (базовый синий #2253BC + яркий синий для акцентов/линий) === */
    --nfs-blue: #2253bc;
    --nfs-blue-hover: #1a4299;
    --nfs-blue-light: #3d6fd4;
    /* Тот же синий, но ярче — линии hover, второй стоп градиента */
    --nfs-blue-bright: #4f8cff;
    --nfs-purple: #7c3aed;
    --nfs-purple-hover: #6d28d9;
    --nfs-purple-light: #8b5cf6;
    --nfs-green: #10b981;
    --nfs-green-hover: #059669;
    --nfs-green-light: #22c55e;
    --nfs-orange: #f59e0b;
    --nfs-orange-hover: #d97706;
    /* Семантический красный (ошибки, опасные действия), не бренд-акцент */
    --nfs-red: #ef4444;
    --nfs-red-hover: #dc2626;
    /* Совместимость: раньше линия была «красной», теперь — яркий синий */
    --nfs-red-line: var(--nfs-blue-bright);
    --nfs-pink: #ec4899;
    --nfs-cyan: #06b6d4;
    --nfs-indigo: #6366f1;

    /* === Серая шкала === */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Единый фон полос и крупных блоков главной страницы (index) */
    --nfs-home-section-bg: #F2F5FC;

    /* === Синяя шкала (для фонов/градиентов) === */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;

    /* === Пурпурная шкала === */
    --purple-50: #faf5ff;
    --purple-100: #f3e8ff;

    /* === Зелёная шкала === */
    --green-50: #f0fdf4;
    --green-100: #dcfce7;

    /* === Красная шкала === */
    --red-50: #fef2f2;
    --red-100: #fee2e2;

    /* === Жёлтая/янтарная шкала === */
    --amber-50: #fffbeb;
    --amber-100: #fef3c7;

    /* === Типографика === */
    --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.8125rem;   /* 13px */
    --text-base: 0.875rem;  /* 14px */
    --text-md: 1rem;        /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 2rem;       /* 32px */
    --text-4xl: 2.5rem;     /* 40px */
    --text-5xl: 3rem;       /* 48px */

    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* === Отступы (spacing) === */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */

    /* === Тени === */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

    /* === Скругления === */
    --radius-sm: 0.375rem;  /* 6px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-2xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;

    /* === Переходы === */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    /* === Контейнер: верхняя граница как в каталоге (1536px), отступы 1rem как в catalog_new.css === */
    --container-max: 1536px;
    --container-padding: 1rem;

    /* === Подчёркивание текстовых кнопок: линия яркий синий, текст при hover — основной синий === */
    --nfs-text-hover-line-height: 3px;
    --nfs-text-hover-line-color: var(--nfs-blue-bright);
    --nfs-text-hover-text-color: var(--nfs-blue);
    --nfs-text-hover-text-color-strong: var(--nfs-blue-hover);
    --nfs-text-hover-line-duration: 0.22s;
    --nfs-text-hover-line-ease: ease;

    /* === Z-index === */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-header: 1000;
    --z-overlay: 1100;
    --z-modal: 1200;
    --z-tooltip: 1300;

    /* === Градиенты (ключевые): базовый синий → яркий синий === */
    --gradient-brand: linear-gradient(135deg, var(--nfs-blue), var(--nfs-blue-bright));
    --gradient-brand-hover: linear-gradient(135deg, var(--nfs-blue-hover), var(--nfs-blue-light));
    --gradient-success: linear-gradient(135deg, var(--nfs-green), var(--nfs-green-light));
    --gradient-hero-bg: linear-gradient(135deg, var(--gray-50) 0%, var(--blue-50) 50%, var(--purple-50) 100%);
}

/* === Единый контейнер (та же сетка max-width, что .catalog-page-wrapper .container в каталоге) === */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: var(--container-max);
    }
}