/* Main CSS - Global styles only (no imports) */

/* Additional global styles */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Bio Sans", Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure all headings use Bio Sans Bold */
h1, h2, h3, h4, h5, h6 {
  font-family: "Bio Sans", Arial, sans-serif;
  font-weight: 700;
}

/* Global pattern backgrounds for special sections */
.hero-section {
  position: relative;
  background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, var(--color-primary) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, var(--color-accent) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.03;
  z-index: 0;
}

/* Brand accent elements */
.brand-accent {
  position: relative;
}

.brand-accent::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
}

/* Loading states with brand colors */
.loading-brand {
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary));
  background-size: 200% 100%;
  animation: loading-gradient 2s ease-in-out infinite;
}

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

/* Focus states with brand colors */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Selection colors */
::selection {
  background-color: var(--color-primary);
  color: var(--color-white);
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-white);
}