:root,
:root:has(input.theme-controller[value="light"]:checked),
[data-theme="light"] {
  color-scheme: light;
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(97.8% 0.005 297.73);
  --color-base-300: oklch(37.01% 0.0069 297.49);
  --color-base-content: oklch(37.57% 0.022 281.8);

  /* Основний синій відповідно до #529BB6 */
  --color-primary: oklch(58% 0.115 249); /* темний насичений синій */
  --color-primary-content: oklch(96% 0.02 249); /* світлий текст на ньому */
  --color-secondary: oklch(58% 0.115 249); /* такий самий для гармонії */
  --color-secondary-content: oklch(96% 0.02 249);

  --color-accent: oklch(60% 0.12 250); /* трохи світліший для акцентів */
  --color-accent-content: oklch(97% 0.02 250);

  --color-neutral: oklch(37.57% 0.0222 281.8);
  --color-neutral-content: oklch(98% 0.0013 286.38);
  --color-info: oklch(63% 0.15 249);
  --color-info-content: oklch(96% 0.02 249);
  --color-success: oklch(73.11% 0.217 147.04);
  --color-success-content: oklch(98.1% 0.014 174.18);
  --color-warning: oklch(79.87% 0.164 73.09);
  --color-warning-content: oklch(99.34% 0.011 95.16);
  --color-error: oklch(65.39% 0.222 25.86);
  --color-error-content: oklch(98.76% 0.009 67.73);

  --radius-selector: 0.25rem;
  --radius-field: 0.375rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

.steps {
  display: flex;
  flex-direction: row;
}

.step {
  width: 32px;
  height: 32px;
  border-radius: 120px;
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.step-divider-wr {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 16px;
}

.step-divider {
  height: 2px;
  width: 100%;
  background-color: #000000;
}