/* Import fontów */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500");
@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@500;600");

/* Zmienne kolorów */
:root {
  /* Primary */
  --primary-900: #111d46;
  --primary-800: #142354;
  --primary-700: #172962;
  --primary-600: #1a2e70;
  --primary-500: #213a8c;
  --primary-400: #5471cf;
  --primary-300: #7d98f8;
  --primary-200: #9cb7ff;
  --primary-100: #bdcfff;
  --primary-50: #dbe4ff;

  /* Secondary */
  --secondary-900: #886e0d;
  --secondary-800: #b08e00;
  --secondary-700: #caa200;
  --secondary-600: #e3b700;
  --secondary-500: #fccb00;
  --secondary-400: #fddb4d;
  --secondary-300: #fee580;
  --secondary-200: #feea99;
  --secondary-100: #feefb3;
  --secondary-50: #fef5cc;

  /* Neutral/Gray */
  --neutral-900: #202121;
  --neutral-800: #48484a;
  --neutral-700: #626266;
  --neutral-600: #7d7d82;
  --neutral-500: #98989e;
  --neutral-400: #b3b3ba;
  --neutral-300: #cbcbd0;
  --neutral-200: #e2e2e7;
  --neutral-100: #ebebee;
  --neutral-50: #f6f6f8;
  --black: #000000;
  --white: #ffffff;

  /* Info colors */
  --success-900: #53b970;
  --success-500: #6dd288;
  --success-200: #d1fadc;
  --error-900: #e53e3e;
  --error-700: #e05252;
  --error-500: #ef5350;
  --error-300: #f88e8d;
  --error-200: #f7e7e7;
  --warning-900: #ffd328;
  --warning-500: #fdc82f;
  --warning-200: #fff7d9;

  /* Container */
  --container-width: 1440px;
  --container-padding: 32px;
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Podstawowe style */
body {
  font-family: "Inter", sans-serif;
  color: var(--neutral-900);
  overflow-x: hidden;
}

/* Typografia */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Funnel Display", serif;
  font-weight: 600;
  letter-spacing: 0;
}

h1 {
  font-size: var(--font-size-64);
  line-height: 120%;
}

h2 {
  font-size: var(--font-size-48);
  line-height: 120%;
}

h3 {
  font-size: var(--font-size-40);
  line-height: 120%;
}

h4 {
  font-size: var(--font-size-32);
  line-height: 120%;
}

h5 {
  font-size: var(--font-size-24);
  line-height: 130%;
}

h6 {
  font-size: var(--font-size-20);
  line-height: 140%;
}

/* Body styles */
.body-large {
  font-size: var(--font-size-18);
  line-height: 140%;
  font-weight: 400;
}

.body-large-strong {
  font-size: var(--font-size-18);
  line-height: 140%;
  font-weight: 500;
}

.body-medium {
  font-size: var(--font-size-16);
  line-height: 140%;
  font-weight: 400;
}

.body-medium-strong {
  font-size: var(--font-size-16);
  line-height: 140%;
  font-weight: 500;
}

.body-small {
  font-size: var(--font-size-14);
  line-height: 140%;
  font-weight: 400;
}

.body-xs {
  font-size: var(--font-size-12);
  line-height: 140%;
  font-weight: 400;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btn-primary {
  background-color: var(--primary-500);
  border: 2px solid var(--primary-500);
  color: var(--white);
}

.btn-primary:hover {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
}

.btn-primary:active {
  background-color: var(--primary-900);
  border-color: var(--primary-900);
}

.btn-secondary {
  background-color: var(--secondary-500);
  color: var(--neutral-900);
}

.btn-secondary:hover {
  background-color: var(--secondary-300);
}

.btn-secondary:active {
  background-color: var(--secondary-200);
}

.btn-tertiary {
  border: 2px solid var(--primary-500);
  color: var(--primary-500);
  background-color: transparent;
}

.btn-tertiary:hover {
  border-color: var(--primary-700);
  color: var(--primary-700);
}

.btn-tertiary:active {
  border-color: var(--primary-900);
  color: var(--primary-900);
}

/* Container */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

@media (max-width: 767px) {
  :root {
    --container-padding: 24px;
  }
}

/* Common layout classes */
.content-left {
  width: 364px;
  flex-shrink: 0;
}

.content-right {
  flex-shrink: 1;
}

/* Vertical lines */
.vertical-lines {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--container-width);
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}

@media screen and (max-width: 1024px) {
  .vertical-lines {
    margin: 0 40px;
    padding: 0 24px;
    width: calc(100% - 80px);
    max-width: unset;
    transform: translateX(0);
    left: 0;
  }
}

.vertical-lines .line {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: var(--primary-300);
  opacity: 0.4;
}

.vertical-lines .line-1 {
  left: 13.26%;
} /* 191px / 1440px */
.vertical-lines .line-2 {
  left: 19.93%;
} /* 287px / 1440px */
.vertical-lines .line-3 {
  left: 61.18%;
} /* 881px / 1440px */
.vertical-lines .line-4 {
  left: 67.85%;
} /* 977px / 1440px */
.vertical-lines .line-5 {
  left: 74.51%;
} /* 1073px / 1440px */
.vertical-lines .line-6 {
  left: 92.78%;
} /* 1336px / 1440px */
.vertical-lines .line-7 {
  left: 93.33%;
} /* 1344px / 1440px */

@media (max-width: 1024px) {
  h1 {
    font-size: var(--font-size-32);
    line-height: 120%;
  }

  h2 {
    font-size: var(--font-size-32);
    line-height: 120%;
  }

  .body-large {
    font-size: var(--font-size-16);
  }

  .vertical-lines .line-1,
  .vertical-lines .line-3,
  .vertical-lines .line-4,
  .vertical-lines .line-5 {
    display: none;
  }

  .vertical-lines .line-6 {
    left: auto;
    right: 13%;
  }

  .vertical-lines .line-7 {
    left: auto;
    right: 11%;
  }
}

/* WCAG Text Size Classes */
:root {
  /* Base font sizes */
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-32: 32px;
  --font-size-40: 40px;
  --font-size-48: 48px;
  --font-size-64: 64px;
}

/* Normal text size */
body.text-size-normal {
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-32: 32px;
  --font-size-40: 40px;
  --font-size-48: 48px;
  --font-size-64: 64px;
}

/* Medium text size */
body.text-size-medium {
  --font-size-12: 14px;
  --font-size-14: 16px;
  --font-size-16: 18px;
  --font-size-18: 20px;
  --font-size-20: 22px;
  --font-size-24: 26px;
  --font-size-32: 32px;
  --font-size-40: 44px;
  --font-size-48: 52px;
  --font-size-64: 64px;
}

/* Large text size */
body.text-size-large {
  --font-size-12: 16px;
  --font-size-14: 18px;
  --font-size-16: 20px;
  --font-size-18: 22px;
  --font-size-20: 24px;
  --font-size-24: 28px;
  --font-size-32: 32px;
  --font-size-40: 48px;
  --font-size-48: 56px;
  --font-size-64: 64px;
}

/* Apply font sizes to specific elements */
body {
  font-size: var(--font-size-16);
}

.font-12 {
  font-size: var(--font-size-12);
}
.font-14 {
  font-size: var(--font-size-14);
}
.font-16 {
  font-size: var(--font-size-16);
}
.font-18 {
  font-size: var(--font-size-18);
}
.font-20 {
  font-size: var(--font-size-20);
}
.font-24 {
  font-size: var(--font-size-24);
}
.font-32 {
  font-size: var(--font-size-32);
}
.font-40 {
  font-size: var(--font-size-40);
}
.font-48 {
  font-size: var(--font-size-48);
}