@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..800;1,9..144,400..800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', monospace;

  --bg-obsidian: #0f1015;
  --bg-card: #181a20;
  --bg-card-hover: #21242c;
  --bg-subtle: #12141a;

  --color-amber: #f97316;
  --color-amber-glow: rgba(249, 115, 22, 0.2);
  --color-terracotta: #e11d48;
  --color-emerald: #10b981;
  --color-cream: #fbf9f5;
  --color-muted: #94a3b8;
  --color-border: #2a2d3a;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-obsidian);
  color: var(--color-cream);
  background-image: 
    radial-gradient(at 0% 0%, rgba(249, 115, 22, 0.08) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.06) 0px, transparent 50%);
  background-attachment: fixed;
}

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

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

/* Glassmorphism & Soft Card Elevation */
.hearth-card {
  background: rgba(24, 26, 32, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hearth-card:hover {
  border-color: rgba(249, 115, 22, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.5), 0 0 15px var(--color-amber-glow);
}

/* Tactile Pill Buttons */
.hearth-btn {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.hearth-btn:active {
  transform: scale(0.96);
}

/* Signature Hearth Flame Pulse */
@keyframes hearth-glow {
  0%, 100% {
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.3), inset 0 0 10px rgba(249, 115, 22, 0.1);
  }
  50% {
    box-shadow: 0 0 24px rgba(249, 115, 22, 0.6), inset 0 0 16px rgba(249, 115, 22, 0.25);
  }
}

.hearth-flame-active {
  animation: hearth-glow 3s infinite ease-in-out;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-obsidian);
}
::-webkit-scrollbar-thumb {
  background: #2b2e3c;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-amber);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Active Filter Pill */
.filter-tab {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.filter-tab.active {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

/* Assignee Options in Modal */
.assignee-opt {
  transition: all 0.2s ease;
}

.assignee-opt.selected {
  border-color: #f97316 !important;
  background-color: rgba(249, 115, 22, 0.15) !important;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.2);
}