/* Component: Section */

.c-section {
  width: 100%;
}

/* Background variants */
.c-section--default {
  background: var(--color-background-primary, #ffffff);
}

.c-section--light {
  background: var(--color-background-secondary, #f5f5f5);
}

.c-section--dark {
  background: var(--color-background-tertiary, #eeeeee);
}

.c-section--primary {
  background: var(--color-primary-500, #0073aa);
  color: var(--color-text-inverse, #ffffff);
}

/* Padding variants */
.c-section--padding-sm {
  padding: var(--spacing-lg, 2rem) 0;
}

.c-section--padding-base {
  padding: var(--spacing-xl, 3rem) 0;
}

.c-section--padding-md {
  padding: var(--spacing-2xl, 4rem) 0;
}

.c-section--padding-lg {
  padding: var(--spacing-2xl, 4rem) 0;
}

/* Spacing (margin-top) variants */
.c-section--spacing-sm {
  margin-top: var(--spacing-lg, 2rem);
}

.c-section--spacing-base {
  margin-top: var(--spacing-xl, 3rem);
}

.c-section--spacing-md {
  margin-top: var(--spacing-2xl, 4rem);
}

.c-section--spacing-lg {
  margin-top: var(--spacing-2xl, 4rem);
}

/* First section should have no top margin */
.c-section:first-of-type {
  margin-top: 0;
}