// global.scss
@use 'sass:math';

@import 'variables';

// Utility Classes
.text-primary {
  color: $primary-color;
}

.text-secondary {
  color: $secondary-color;
}

.bg-primary {
  background-color: $primary-color;
}

.bg-secondary {
  background-color: $secondary-color;
}

.padding-small {
  padding: math.div($spacer, 2);
}

.padding-medium {
  padding: $spacer;
}

.padding-large {
  padding: $spacer * 2;
}

.margin-small {
  margin: math.div($spacer, 2);
}

.margin-medium {
  margin: $spacer;
}

.margin-large {
  margin: $spacer * 2;
}

.font-base {
  font-family: $font-family-base;
  font-size: $font-size-base;
  line-height: $line-height-base;
}

.font-bold {
  font-weight: $font-weight-bold;
}

.font-normal {
  font-weight: $font-weight-normal;
}

// Example Button Classes
.btn {
  &-custom-1 {
    background-color: $custom-color-1;
    color: #fff;
    border: none;

    &:hover {
      background-color: darken($custom-color-1, 10%);
    }
  }
}