// Import reset and utilities
@use 'sass:color';
@use 'reset';
@use 'variables' as *;
@use 'mixins' as *;

// Base styles
html {
  font-size: 16px;
}

body {
  font-family: $font-primary;
  font-size: $font-size-base;
  font-weight: $font-regular; // Figtree Light
  color: $color-dark;
  background-color: $color-white;
  line-height: 1.6;
}

// Typography
h1 {
  @include heading($font-size-5xl);

  @include md-up {
    font-size: $font-size-6xl;
  }
}

h2 {
  @include heading($font-size-3xl);

  @include md-up {
    font-size: $font-size-4xl;
  }
}

h3 {
  @include heading($font-size-2xl);

  @include md-up {
    font-size: $font-size-3xl;
  }
}

h4 {
  @include heading($font-size-xl);

  @include md-up {
    font-size: $font-size-2xl;
  }
}

h5 {
  @include heading($font-size-lg);

  @include md-up {
    font-size: $font-size-xl;
  }
}

h6 {
  @include heading($font-size-base, $font-semibold);

  @include md-up {
    font-size: $font-size-lg;
  }
}

p {
  margin-bottom: $spacing-md;

  &:last-child {
    margin-bottom: 0;
  }
}

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

em {
  font-style: italic;
  font-weight: $font-light; // Figtree Light Italic
}

// Links
a {
  color: $color-primary;
  text-decoration: underline;
  transition: color $transition-fast;

  &:hover {
    color: $color-primary-dark;
  }

  @include focus-visible;
}

// Container
.container {
  @include container;
}

// Section spacing
section {
  padding: $spacing-3xl 0;

  @include md-up {
    padding: $spacing-4xl 0;
  }
}

// Utility classes
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

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

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

.text-muted {
  color: $color-gray-600;
}

.mt-1 { margin-top: $spacing-xs; }
.mt-2 { margin-top: $spacing-sm; }
.mt-3 { margin-top: $spacing-md; }
.mt-4 { margin-top: $spacing-lg; }
.mt-5 { margin-top: $spacing-xl; }

.mb-1 { margin-bottom: $spacing-xs; }
.mb-2 { margin-bottom: $spacing-sm; }
.mb-3 { margin-bottom: $spacing-md; }
.mb-4 { margin-bottom: $spacing-lg; }
.mb-5 { margin-bottom: $spacing-xl; }

.py-1 { padding-top: $spacing-xs; padding-bottom: $spacing-xs; }
.py-2 { padding-top: $spacing-sm; padding-bottom: $spacing-sm; }
.py-3 { padding-top: $spacing-md; padding-bottom: $spacing-md; }
.py-4 { padding-top: $spacing-lg; padding-bottom: $spacing-lg; }
.py-5 { padding-top: $spacing-xl; padding-bottom: $spacing-xl; }

.px-1 { padding-left: $spacing-xs; padding-right: $spacing-xs; }
.px-2 { padding-left: $spacing-sm; padding-right: $spacing-sm; }
.px-3 { padding-left: $spacing-md; padding-right: $spacing-md; }
.px-4 { padding-left: $spacing-lg; padding-right: $spacing-lg; }
.px-5 { padding-left: $spacing-xl; padding-right: $spacing-xl; }

// Grid utilities
.grid-2 {
  @include grid(1);

  @include sm-up {
    @include grid(2);
  }
}

.grid-3 {
  @include grid(1);

  @include sm-up {
    @include grid(2);
  }

  @include lg-up {
    @include grid(3);
  }
}

.grid-4 {
  @include grid(1);

  @include sm-up {
    @include grid(2);
  }

  @include lg-up {
    @include grid(4);
  }
}

// Animations
.fade-in {
  @include fade-in;
}

.slide-up {
  @include slide-up;
}

// Respect reduced motion preference
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

// Loading state
.loading {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 3px solid $color-gray-300;
    border-top-color: $color-primary;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

// Skeleton loader
.skeleton {
  background: linear-gradient(
    90deg,
    $color-gray-200 25%,
    $color-gray-100 50%,
    $color-gray-200 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

// Accessibility
.sr-only {
  @include visually-hidden;
}

// Focus visible styles (using primary-dark for better contrast)
:focus-visible {
  outline: 3px solid $color-primary-dark;
  outline-offset: 4px;
}

// Keyboard navigation support
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid $color-primary-dark;
  outline-offset: 2px;
}

// Touch targets - minimum 44x44px for all interactive elements
button,
a,
input,
textarea,
select,
[role="button"],
[role="link"] {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
}

// Spacing between interactive elements
nav a + a,
nav button + button {
  margin-left: 8px;
}

// Skip link styles
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: $color-primary;
  color: $color-white;
  padding: 8px 16px;
  z-index: 1000;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  font-weight: $font-regular;

  &:focus {
    top: 0;
  }
}

// Dark mode support
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #{$color-dark-bg};
    --text-color: #{$color-dark-text};
    --primary-color: #{$color-dark-primary};
    --gray-800: #{$color-dark-gray-800};
    --gray-700: #{$color-dark-gray-700};
    --gray-600: #{$color-dark-gray-600};
  }

  body {
    background-color: var(--bg-color);
    color: var(--text-color);
  }

  a {
    color: var(--primary-color);

    &:hover {
      color: color.adjust($color-dark-primary, $lightness: 10%);
    }
  }
}

// High contrast mode support
@media (prefers-contrast: more) {
  :root {
    --bg-color: #{$color-hc-bg};
    --text-color: #{$color-hc-text};
    --primary-color: #{$color-hc-primary};
  }

  body {
    background-color: var(--bg-color);
    color: var(--text-color);
  }

  a {
    color: var(--primary-color);
  }

  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  // Strong borders for better contrast
  button,
  input,
  textarea,
  select {
    border: 2px solid var(--text-color) !important;
  }
}