@use 'variables' as *;

// Responsive helper
@mixin respond($bp) {
  @if $bp == sm  { @media (max-width: #{$bp-sm})  { @content; } }
  @if $bp == md  { @media (max-width: #{$bp-md})  { @content; } }
  @if $bp == lg  { @media (max-width: #{$bp-lg})  { @content; } }
  @if $bp == xl  { @media (max-width: #{$bp-xl})  { @content; } }
}

// Accent underline on links / headings
@mixin accent-underline($height: 2px) {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 0;
    width: 100%; height: $height;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    border-radius: 999px;
  }
  &:hover::after, &.active::after { transform: scaleX(1); }
}

// Frosted glass (dark)
@mixin glass($alpha: 0.9) {
  background: rgba(26, 29, 33, $alpha);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

// Container
@mixin container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 2.5rem);
}

// Section spacing (responsive)
@mixin section {
  padding-block: clamp(3rem, 8vw, 6rem);
}

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

// Card base
@mixin card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), transform var(--transition);
}