/* Reset */
html {
  scroll-behavior: smooth;
}

html.dark {
  color-scheme: dark;
}

body {
  font-family: 'Figtree', sans-serif;
  background-color: #111827; /* background-primary */
  color: #F3F4F6; /* text-primary */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
}

/* Custom buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 500;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px #111827, 0 0 0 4px #8B5CF6;
}

.btn-primary {
  background-color: #8B5CF6; /* accent-primary */
  color: white;
}

.btn-primary:hover {
  background-color: #7C3AED; /* violet-600 */
}

.btn-secondary {
  background-color: #14B8A6; /* accent-secondary */
  color: white;
}

.btn-secondary:hover {
  background-color: #0D9488; /* teal-600 */
}

.btn-outline {
  border: 1px solid #8B5CF6; /* accent-primary */
  color: #8B5CF6;
}

.btn-outline:hover {
  background-color: #8B5CF6;
  color: white;
}

/* Custom styles for pricing */
.tick {
  color: #14B8A6; /* accent-secondary */
}

.cross {
  color: #9CA3AF; /* text-secondary */
  opacity: 0.5;
}

/* Custom colors */
.bg-background-primary {
  background-color: #111827;
}

.bg-background-secondary {
  background-color: #1F2937;
}

.text-text-primary {
  color: #F3F4F6;
}

.text-text-secondary {
  color: #9CA3AF;
}

.text-accent-primary {
  color: #8B5CF6;
}

.text-accent-secondary {
  color: #14B8A6;
}

.border-border-divider {
  border-color: #374151;
}

/* Helper for aspect ratio */
.aspect-w-16 {
  position: relative;
  padding-bottom: 56.25%;
}

.aspect-w-16 > *, .aspect-h-9 > * {
  position: absolute;
  height: 100%;
  width: 100%;
  inset: 0px;
}