@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground));
}

/* Hide scrollbar for clean horizontal nav strips */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Right-Side Fixed Vertical Anchor Rail Active State */
.side-nav-item.active .side-nav-badge {
  opacity: 1;
  transform: translateX(0);
}
.side-nav-item.active .side-nav-dot {
  background-color: hsl(var(--foreground));
  border-color: hsl(var(--foreground));
  transform: scale(1.25);
}
.side-nav-item.active .side-nav-label {
  color: hsl(var(--foreground));
  font-weight: 700;
}

/* Scattered Functional Character Cards */
.character-card {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.character-card:hover {
  transform: rotate(0deg) scale(1.05) translateY(-3px) !important;
  z-index: 30;
  border-color: hsl(var(--foreground) / 0.7);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
}

.character-card.active {
  transform: rotate(0deg) scale(1.04) !important;
  z-index: 25;
  background-color: hsl(var(--foreground));
  color: hsl(var(--background));
  border-color: hsl(var(--foreground));
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.18);
}

.character-card.active .char-icon {
  background-color: hsl(var(--background) / 0.15);
  border-color: hsl(var(--background) / 0.3);
}

.character-card.active .char-icon svg {
  color: hsl(var(--background));
}

.character-card.active .char-sub {
  color: hsl(var(--background) / 0.75);
}

/* Concentric Discovery Layer Step Cards */
.discovery-step-card {
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.discovery-step-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
}

.discovery-step-card.active {
  background-color: hsl(var(--foreground));
  color: hsl(var(--background));
  border-color: hsl(var(--foreground));
  box-shadow: 0 6px 16px -3px rgba(0, 0, 0, 0.15);
}

.discovery-step-card.active span.font-bold {
  color: hsl(var(--background));
}

.discovery-step-card.active span.text-muted-foreground {
  color: hsl(var(--background) / 0.75);
}

/* Analogy Box Button Active States */
.analogy-box-btn {
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.analogy-box-btn:hover {
  transform: translateY(-1px);
}
.analogy-box-btn.active {
  border-color: hsl(var(--foreground));
  background-color: hsl(var(--muted) / 0.5);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
}

/* Async Workspace Tabs */
.async-tab-btn {
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.async-tab-btn:hover:not(.active) {
  background-color: hsl(var(--muted) / 0.4);
}

/* IA Architecture Toggle Buttons */
.ia-toggle-btn {
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.ia-toggle-btn:hover:not(.active) {
  background-color: hsl(var(--muted) / 0.6);
}