/* ============================================================
   CSS VARIABLES — Design System
============================================================ */
:root {
  --cream:    #f5f0e8;
  --mauve:    #8c6f7a;
  --orange:   #e8843a;
  --teal:     #3ecfbf;
  --darkteal: #249a90;
  --apricot: #f69549;
  --dark:     #1a1a1a;
  --white:    #ffffff;

  --font-display: 'Lexend', sans-serif;
  --font-body:    'Lexend', sans-serif;

  --radius-lg: 20px;
  --radius-xl: 32px;
  --sidebar-w: 40px;
  --transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--dark);
  overflow-x: hidden;
  line-height: 1.6;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   SKIP LINK — Accessibility
============================================================ */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  background: var(--dark);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 0.3s;
}
.skip-link:focus { top: 1rem; }