// Colors
$bg-dark: #000;
$bg-light: #fff;

$text-dark: #fff;
$text-light: #000;

$btn-bg: #111;
$btn-bg-hover: #222;
$btn-text: #fff;

$shadow-dark: rgba(0, 0, 0, 0.2);
$shadow-light: rgba(255, 255, 255, 0.3);
$shadow-light-hover: rgba(255, 255, 255, 0.5);

$grid-dark: rgba(255, 255, 255, 0.05);
$grid-light: rgba(0, 0, 0, 0.1);

$scrollbar-thumb: #111;

// Spacing
$spacing-small: 0.5rem;
$spacing-medium: 1rem;
$spacing-large: 1.5rem;

// Transitions
$transition-duration: 0.3s;

// Mixins
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin button-base {
  background: $btn-bg;
  color: $btn-text;
  border: none;
  padding: 0.7rem 1.2rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: $spacing-small;
  transition: all $transition-duration ease;
  text-decoration: none;
  letter-spacing: -0.01em;

  &:hover {
    background: $btn-bg-hover;
    transform: scale(1.05);
  }
}

@mixin box-shadow($color) {
  box-shadow: 0 0 15px $color;
}
