/* Temper Landing Page Styles */

:root {
  --font-body: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-display: "Vollkorn", "Noto Serif SC", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  /* Light mode tokens (default) */
  --background: oklch(0.99 0.003 80);
  --foreground: oklch(0.20 0.01 80);
  --primary: oklch(0.55 0.14 75);
  --card: oklch(1 0 0);
  --border: oklch(0.88 0.004 80);
  --muted: oklch(0.55 0.01 80);
}

html.dark {
  --background: oklch(0.12 0.005 80);
  --foreground: oklch(0.90 0.005 80);
  --primary: oklch(0.65 0.15 75);
  --card: oklch(0.22 0.007 80);
  --border: oklch(1 0 0 / 8%);
  --muted: oklch(0.70 0.01 80);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background-color: var(--background);
  color: var(--foreground);
}

/* Hero blobs */
.hero-blob {
  background: radial-gradient(circle at center, var(--primary), transparent 70%);
  animation: blob-float 8s ease-in-out infinite;
}

.hero-blob-secondary {
  background: radial-gradient(circle at center, oklch(0.7 0.15 280), transparent 70%);
  animation: blob-float 10s ease-in-out infinite reverse;
}

@keyframes blob-float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-20px, 20px) scale(1.05);
  }
}

/* Fade in animation */
.animate-fade-in {
  opacity: 0;
  transform: translateY(12px);
  animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

@keyframes fade-in-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Feature card hover glow */
.feature-card:hover {
  border-color: oklch(from var(--primary) l c h / 30%);
}

html.dark .feature-card:hover {
  border-color: oklch(from var(--primary) l c h / 40%);
}

/* Workflow step numbers */
.workflow-step .rounded-full {
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.workflow-step:hover .rounded-full {
  transform: scale(1.08);
  background-color: var(--primary);
  color: #fff;
}

/* Framework items */
.framework-item {
  cursor: default;
}

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

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: oklch(from var(--border) l c h / 80%);
  border-radius: 4px;
}

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

/* Selection color */
::selection {
  background: oklch(from var(--primary) l c h / 30%);
  color: var(--foreground);
}

/* Focus outline */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

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