@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-sans);
  background-color: #09090b;
  color: #fafafa;
  min-height: 100vh;
  letter-spacing: -0.01em;
}

.font-mono {
  font-family: var(--font-mono);
}

/* Minimal Surface Cards */
.surface {
  background-color: #121215;
  border: 1px solid #27272a;
}

.surface-secondary {
  background-color: #18181b;
  border: 1px solid #27272a;
}

.surface-interactive {
  background-color: #121215;
  border: 1px solid #27272a;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.surface-interactive:hover {
  background-color: #18181b;
  border-color: #3f3f46;
}

/* 3D Flip Card (Minimal & Crisp) */
.card-perspective {
  perspective: 1200px;
}

.card-inner {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

.card-inner.is-flipped {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
}

/* Minimal Scrollbars */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #71717a;
}