/* ============================================================
   UNMOZI Website - Base Styles
   ============================================================ */

html {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
}

body {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  overflow-x: hidden;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* Selection */
::selection {
  background: rgba(249, 115, 22, 0.3);
  color: var(--color-text-primary);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1 {
  font-size: var(--text-5xl);
}

h2 {
  font-size: var(--text-4xl);
}

h3 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

a {
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-400);
}

/* Image defaults */
img {
  height: auto;
}

/* Body no-scroll for mobile menu */
.body--no-scroll {
  overflow: hidden;
}

/* Skip to content link - visually hidden until focused */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: var(--color-accent-400);
  color: var(--color-text-inverse);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  z-index: var(--z-modal);
  transition: top var(--transition-fast);
}

.skip-to-content:focus {
  top: var(--space-4);
}

/* Gradient divider */
.gradient-divider {
  width: 120px;
  height: 2px;
  background: var(--gradient-divider);
  border: none;
  margin: 0 auto;
}