/*!
 * Bootstrap 5 Custom Variables
 * Переопределение переменных Bootstrap на основе дизайна Figma
 */

:root {
  /* Цветовая палитра из Figma */
  --bs-primary: #0b0c0e;        /* Grayscale/950 - основной цвет */
  --bs-secondary: #2d3139;      /* Grayscale/800 */
  --bs-success: #20b038;        /* Зеленый для кнопок WhatsApp */
  --bs-light: #f7f7f5;          /* Grayscale/50 - светлый фон */
  --bs-dark: #0b0c0e;           /* Grayscale/950 */
  
  /* Дополнительные цвета из палитры */
  --bs-gray-100: #e2e4e9;       /* Grayscale/100 - разделители */
  --bs-gray-500: #80899c;       /* Grayscale/500 */
  --bs-gray-600: #596173;       /* Grayscale/600 */
  --bs-gray-800: #2d3139;       /* Grayscale/800 */
  --bs-gray-950: #0b0c0e;       /* Grayscale/950 */
  
  /* Шрифты */
  --bs-font-sans-serif: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 14px;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.43; /* 20px / 14px */
  --bs-body-color: #0b0c0e;
  
  /* Типографика из Figma */
  --bs-font-size-base: 14px;   /* Body-S/14-20-Regular */
  --bs-h1-font-size: 60px;      /* Title/60-68-SemiBold */
  --bs-h1-font-weight: 600;
  --bs-h1-line-height: 1.13;   /* 68px / 60px */
  
  --bs-h2-font-size: 40px;      /* Title/40-48-SemiBold */
  --bs-h2-font-weight: 600;
  --bs-h2-line-height: 1.2;     /* 48px / 40px */
  
  --bs-h3-font-size: 32px;      /* Title/32-40-SemiBold */
  --bs-h3-font-weight: 600;
  --bs-h3-line-height: 1.25;   /* 40px / 32px */
  
  --bs-h4-font-size: 24px;      /* Title/24-32-SemiBold или Regular */
  --bs-h4-font-weight: 600;
  --bs-h4-line-height: 1.33;    /* 32px / 24px */
  
  --bs-h5-font-size: 18px;      /* Headline/18-24-Regular */
  --bs-h5-font-weight: 400;
  --bs-h5-line-height: 1.33;    /* 24px / 18px */
  
  --bs-h6-font-size: 16px;      /* Body-M/16-22-Regular */
  --bs-h6-font-weight: 400;
  --bs-h6-line-height: 1.375;   /* 22px / 16px */
  
  /* Border radius */
  --bs-border-radius: 8px;      /* Основной радиус из дизайна */
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 56px;  /* Для кнопок */
  --bs-border-radius-xl: 2500px; /* Для круглых элементов */
  --bs-border-radius-pill: 56px;
  
  /* Spacing */
  --bs-spacer: 1rem;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  
  /* Shadows */
  --bs-box-shadow: 0 0.125rem 0.25rem rgba(11, 12, 14, 0.075);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(11, 12, 14, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(11, 12, 14, 0.175);
  
  /* Buttons */
  --bs-btn-padding-x: 20px;
  --bs-btn-padding-y: 14px;
  --bs-btn-font-size: 14px;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.43;
  --bs-btn-border-radius: 56px;
  --bs-btn-border-width: 0;
  --bs-btn-border-radius-pill: 56px;

  /* Button palette */
  --bs-btn-primary-color: #ffffff;
  --bs-btn-primary-bg: #0b0c0e;
  --bs-btn-primary-border-color: #0b0c0e;
  --bs-btn-primary-hover-color: #ffffff;
  --bs-btn-primary-hover-bg: #2d3139;
  --bs-btn-primary-hover-border-color: #2d3139;
  --bs-btn-primary-active-bg: #2d3139;
  --bs-btn-primary-active-border-color: #2d3139;

  --bs-btn-light-color: #0b0c0e;
  --bs-btn-light-bg: #f7f7f5;
  --bs-btn-light-border-color: #f7f7f5;
  --bs-btn-light-hover-color: #0b0c0e;
  --bs-btn-light-hover-bg: #e2e4e9;
  --bs-btn-light-hover-border-color: #e2e4e9;
  --bs-btn-light-active-bg: #e2e4e9;
  --bs-btn-light-active-border-color: #e2e4e9;
  
  /* Links */
  --bs-link-color: #0b0c0e;
  --bs-link-color-rgb: 11, 12, 14;
  --bs-link-hover-color: #2d3139;
  --bs-link-hover-color-rgb: 45, 49, 57;
  
  /* Inputs */
  --bs-input-padding-x: 20px;
  --bs-input-padding-y: 14px;
  --bs-input-font-size: 14px;
  --bs-input-border-radius: 8px;
  --bs-input-bg: #ffffff;
  --bs-input-border-color: #e2e4e9;
  
  /* Cards */
  --bs-card-border-radius: 8px;
  --bs-card-bg: #ffffff;
  --bs-card-border-color: #e2e4e9;

  /* Modal */
}

/* Переопределения Bootstrap под тему */
.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--bs-gray-800);
  --bs-btn-hover-border-color: var(--bs-gray-800);
  --bs-btn-active-bg: var(--bs-gray-800);
  --bs-btn-active-border-color: var(--bs-gray-800);
  --bs-btn-border-width: 0;
  --bs-btn-border-radius: 56px;
}

.btn-light {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-bg: var(--bs-light);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-hover-color: var(--bs-primary);
  --bs-btn-hover-bg: #e2e4e9;
  --bs-btn-hover-border-color: #e2e4e9;
  --bs-btn-active-bg: #e2e4e9;
  --bs-btn-active-border-color: #e2e4e9;
  --bs-btn-border-width: 0;
  --bs-btn-border-radius: 56px;
}

.btn-lg {
  --bs-btn-padding-x: 20px;
  --bs-btn-padding-y: 14px;
  --bs-btn-font-size: 14px;
  --bs-btn-line-height: 1.43;
  --bs-btn-border-radius: 56px;
}

.modal {
  --bs-modal-padding: 30px;
  --bs-modal-header-padding: 16px 32px;
  --bs-modal-header-padding-x: 16px;
  --bs-modal-header-padding-y: 32px;
  --bs-modal-footer-gap: 16px;
  --bs-modal-border-radius: 28px;
  --bs-modal-inner-border-radius: 28px;
}