@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

// Core variables
$theme-colors: (
  "primary": #d43aff,
  "secondary": #595b5c,
  "success": #00b7ef,
  "warning": rgb(225 29 72),
  "danger": #eb5424,
  "light": #9b9b9b,
  "dark": #2f2f2f,
);

// Typography
$font-family-base: "Quicksand", sans-serif;
$font-family-monospace: "Roboto Mono", monospace;
$font-size-base: 1rem;
$line-height-base: 1.8;
$headings-font-weight: normal;
$headings-color: #fff;

// Body
$body-bg: black;
$body-color: #9b9b9b;

// Links
$link-color: #00b7ef;
$link-decoration: none;
$link-hover-decoration: underline;

// Buttons
$btn-padding-y: 1.125rem; // 18px
$btn-padding-x: 1.75rem; // 28px
$btn-font-weight: 500;
$btn-letter-spacing: 1px;
$btn-border-width: 1px;
$btn-transition: all 0.3s ease-in-out;

// Forms
$input-bg: #494848;
$input-color: white;
$input-border-color: #494848;
$input-border-radius: 6px;
$input-padding-y: 0.625rem; // 10px
$input-padding-x: 0.625rem; // 10px
$input-font-family: $font-family-monospace;
$input-font-size: 1rem;
$input-focus-border-color: lighten($input-border-color, 10%);
$input-focus-box-shadow: none;

// Cards
$card-bg: #2f2f2f;
$card-border-radius: 3px;
$card-border-width: 0;
$card-spacer-y: 1.25rem;
$card-spacer-x: 1.25rem;

// Modals
$modal-content-bg: #2f2f2f;
$modal-header-border-color: #595b5c;
$modal-footer-border-color: #595b5c;

// Navbar
$navbar-dark-color: #9b9b9b;
$navbar-dark-hover-color: #fff;
$navbar-padding-y: 1rem;
$navbar-nav-link-padding-x: 1rem;

// Utilities
$border-radius: 3px;
$border-radius-lg: 6px;
$box-shadow: none;

// Custom utility classes
.text-uppercase {
  letter-spacing: 1px;
}

// Custom button styles
.btn {
  text-transform: uppercase;

  &-dark {
    @include button-variant(transparent, #595b5c);

    &:hover {
      border-color: #fff;
      background-color: transparent;
    }
  }

  &-primary {
    &:hover {
      background-color: darken(#d43aff, 5%);
    }
  }
}

// Custom input styles
.form-control {
  &:focus {
    background-color: lighten($input-bg, 5%);
  }
}

html {
  padding: 0 30px;
}

body {
  max-width: 1200px;
  margin: 5em auto 0 auto;
}

h2 {
  margin: 0 0 45px 0;
  font-size: 36px;
}

h3 {
  margin: 0 0 2rem 0;
  font-size: 32px;
}

p {
  margin: 0 0 45px;
}

ul {
  margin: 0 0 32px;
}

li strong {
  color: #fff;
}

pre,
code {
  display: inline;
  font-size: 16px;
}

// Override Bootstrap's link hover behavior
a:hover {
  text-decoration: none;
  border-bottom-color: #00b7ef;
}
// Import Bootstrap after variable overrides
@import "bootstrap/scss/bootstrap";