:root {
  /* Color Variables */
  --ds-color-primary-fb25362e: #3b82f6;
  --ds-color-secondary-fb25362e: #10b981;
  --ds-color-accent-fb25362e: #f59e0b;
  --ds-color-neutral-dark-fb25362e: #1f2937;
  --ds-color-neutral-light-fb25362e: #f3f4f6;
  --ds-color-white-fb25362e: #ffffff;
  --ds-color-gray-fb25362e: #9ca3af;

  /* Typography Variables */
  --ds-font-family-primary-fb25362e: 'Inter', sans-serif;
  --ds-font-family-secondary-fb25362e: 'Merriweather', serif;

  /* Spacing Grid (8px based) */
  --ds-space-xs-fb25362e: 8px;
  --ds-space-sm-fb25362e: 16px;
  --ds-space-md-fb25362e: 24px;
  --ds-space-lg-fb25362e: 32px;
  --ds-space-xl-fb25362e: 48px;
  --ds-space-xxl-fb25362e: 64px;

  /* Container Variables */
  --ds-container-max-width-fb25362e: 1200px;
}

/* Base Utility Classes */
.ds-text-primary-fb25362e { color: var(--ds-color-primary-fb25362e); }
.ds-text-secondary-fb25362e { color: var(--ds-color-secondary-fb25362e); }
.ds-bg-primary-fb25362e { background-color: var(--ds-color-primary-fb25362e); }
.ds-bg-secondary-fb25362e { background-color: var(--ds-color-secondary-fb25362e); }
.ds-bg-neutral-light-fb25362e { background-color: var(--ds-color-neutral-light-fb25362e); }

/* Spacing Utilities */
.ds-p-xs-fb25362e { padding: var(--ds-space-xs-fb25362e); }
.ds-p-sm-fb25362e { padding: var(--ds-space-sm-fb25362e); }
.ds-p-md-fb25362e { padding: var(--ds-space-md-fb25362e); }
.ds-p-lg-fb25362e { padding: var(--ds-space-lg-fb25362e); }
.ds-p-xl-fb25362e { padding: var(--ds-space-xl-fb25362e); }

.ds-m-xs-fb25362e { margin: var(--ds-space-xs-fb25362e); }
.ds-m-sm-fb25362e { margin: var(--ds-space-sm-fb25362e); }
.ds-m-md-fb25362e { margin: var(--ds-space-md-fb25362e); }
.ds-m-lg-fb25362e { margin: var(--ds-space-lg-fb25362e); }
.ds-m-xl-fb25362e { margin: var(--ds-space-xl-fb25362e); }

/* Section Wrappers */
.ds-section-wrapper-fb25362e {
  width: 100%;
  max-width: var(--ds-container-max-width-fb25362e);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: var(--ds-space-md-fb25362e);
  padding-right: var(--ds-space-md-fb25362e);
  padding-top: var(--ds-space-xl-fb25362e);
  padding-bottom: var(--ds-space-xl-fb25362e);
}

@media (max-width: 768px) {
  .ds-section-wrapper-fb25362e {
    padding-left: var(--ds-space-sm-fb25362e);
    padding-right: var(--ds-space-sm-fb25362e);
    padding-top: var(--ds-space-lg-fb25362e);
    padding-bottom: var(--ds-space-lg-fb25362e);
  }
}

/* Button Component Styles */
.ds-btn-fb25362e {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ds-font-family-primary-fb25362e);
  font-weight: 600;
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 6px;
  transition: all 0.25s ease-in-out;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
}

/* Primary Button */
.ds-btn-primary-fb25362e {
  background-color: var(--ds-color-primary-fb25362e);
  color: var(--ds-color-white-fb25362e);
  border-color: var(--ds-color-primary-fb25362e);
}
.ds-btn-primary-fb25362e:hover {
  background-color: #2563eb; /* Darker primary tint */
  border-color: #2563eb;
  color: var(--ds-color-white-fb25362e);
}

/* Secondary Button (Outlined) */
.ds-btn-secondary-fb25362e {
  background-color: transparent;
  color: var(--ds-color-primary-fb25362e);
  border-color: var(--ds-color-primary-fb25362e);
}
.ds-btn-secondary-fb25362e:hover {
  background-color: var(--ds-color-primary-fb25362e);
  color: var(--ds-color-white-fb25362e);
}

/* Tertiary Button (Link-style button) */
.ds-btn-tertiary-fb25362e {
  background-color: transparent;
  color: var(--ds-color-neutral-dark-fb25362e);
  padding: 8px 16px;
  position: relative;
}
.ds-btn-tertiary-fb25362e::after {
  content: '';
  position: absolute;
  width: calc(100% - 32px);
  height: 2px;
  bottom: 4px;
  left: 16px;
  background-color: var(--ds-color-neutral-dark-fb25362e);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.ds-btn-tertiary-fb25362e:hover {
  color: var(--ds-color-primary-fb25362e);
}
.ds-btn-tertiary-fb25362e:hover::after {
  background-color: var(--ds-color-primary-fb25362e);
  transform: scaleX(1);
  transform-origin: bottom left;
}