/* CSS Variables - Racing Future Academy */

/* Force border-box dla elementów interaktywnych i layoutowych */
.hero-buttons,
.hero-buttons *,
.lesson-steps-grid,
.lesson-steps-grid *,
.benefits-grid,
.benefits-grid *,
.video-controls,
.video-controls *,
.benefit-card,
.benefit-card *,
.lesson-step-card,
.lesson-step-card *,
.hero-buttons *::before,
.hero-buttons *::after,
.lesson-steps-grid *::before,
.lesson-steps-grid *::after,
.benefits-grid *::before,
.benefits-grid *::after,
.video-controls *::before,
.video-controls *::after,
.benefit-card *::before,
.benefit-card *::after,
.lesson-step-card *::before,
.lesson-step-card *::after {
  box-sizing: border-box !important;
}

:root {
  /* Colors from Figma */
  --primary-red: #e62242;
  --dark-gray: #262728;
  --light-gray: #f9f9f9;
  --white: #ffffff;
  --text-gray: #797978;
  --success-green: #4baa58;

  /* Typography from Figma */
  --font-headings: "League Spartan", sans-serif;
  --font-ui: "Inter", sans-serif;

  /* Breakpoints */
  --mobile-max: 767px;
  --tablet-min: 768px;
  --tablet-max: 1399px;
  --desktop-min: 1400px;
  --desktop-target: 1440px;

  /* Container widths */
  --container-mobile: 345px;     /* 393px - 24px padding each side */
  --container-tablet: 720px;     /* 768px - 24px padding each side */
  --container-desktop: 1152px;   /* 1200px - 24px padding each side */
  --container-large: 1344px;     /* 1440px - 48px padding each side */

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);

  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.2s ease-in-out;
  --transition-slow: 0.3s ease-in-out;

  /* Shadows */
  --shadow-subtle: 0 2px 4px rgba(38, 39, 40, 0.1);
  --shadow-card: 0 4px 8px rgba(38, 39, 40, 0.15);
  --shadow-elevated: 0 8px 16px rgba(38, 39, 40, 0.2);
}

/* === GLOBAL CONTAINER CLASS - Override Bootstrap === */
.container {
  width: 100% !important; /* Mobile: pełna szerokość - override Bootstrap */
  margin: 0 !important; /* Mobile: bez marginesów - override Bootstrap */
  padding: 0 !important; /* Mobile: bez paddingów - override Bootstrap */
  max-width: none !important; /* Mobile: bez ograniczeń szerokości - override Bootstrap */
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    max-width: var(--container-tablet) !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
  }
}

/* Desktop */
@media (min-width: 1400px) {
  .container {
    max-width: var(--container-large) !important;
    margin: 0 auto !important;
    padding: 0 48px !important;
  }
}