@import "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Inter:wght@300;400;500&display=swap";
/* [project]/src/app/globals.css [app-client] (css) */
:root {
  --bg: linear-gradient(to bottom, #fde8d7 0%, #f5ebe0 50%, #faf8f5 100%);
  --bg-solid: #f5ebe0;
  --bg-card: #ffffffe0;
  --text: #1a1a1a;
  --text-secondary: #6b6b6b;
  --text-muted: #9a9a9a;
  --border: #e8e2da;
  --accent: #c4956a;
  --accent-gold: #d4a574;
  --success: #4a7c59;
  --shadow: #00000014;
}

[data-theme="dark"] {
  --bg: linear-gradient(to bottom, #4a4055 0%, #352f40 40%, #1e1a24 100%);
  --bg-solid: #352f40;
  --bg-card: #464150e6;
  --text: #f5f4f2;
  --text-secondary: #b0b0b0;
  --text-muted: #999;
  --border: #5a5365;
  --accent: #d4a574;
  --accent-gold: #e0b88a;
  --success: #6b9b7a;
  --shadow: #00000040;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--bg-solid);
  background-image: var(--bg);
  max-width: 100vw;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  transition: background .3s, color .3s;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: Playfair Display, Georgia, serif;
  font-weight: 500;
}

a {
  color: inherit;
  text-decoration: none;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hero-bg {
  z-index: -1;
  height: 55vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.hero-bg:before {
  content: "";
  opacity: .7;
  background-image: url("https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?w=1600&q=80");
  background-position: 50% 40%;
  background-size: cover;
  position: absolute;
  inset: 0;
}

.hero-bg:after {
  content: "";
  background: linear-gradient(to bottom, transparent 20%, var(--bg-solid) 95%);
  position: absolute;
  inset: 0;
}

[data-theme="dark"] .hero-bg:before {
  opacity: .4;
}

.agent-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  box-shadow: 0 2px 12px var(--shadow);
  border-radius: 16px;
  padding: 24px;
  transition: all .3s;
}

.agent-card:hover {
  box-shadow: 0 8px 24px var(--shadow);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.agent-card.expanded {
  border-color: var(--accent-gold);
}

.status-dot {
  border-radius: 50%;
  width: 8px;
  height: 8px;
  animation: 2s infinite pulse;
}

.status-dot.live {
  background: var(--success);
}

.status-dot.offline {
  background: #dc2626;
  animation: none;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .5;
  }
}

.theme-toggle {
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--text);
  border-radius: 24px;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 14px;
  transition: all .2s;
  display: flex;
}

.theme-toggle:hover {
  border-color: var(--accent);
}

.agent-details {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  transition: all .3s;
  overflow: hidden;
}

.agent-details.open {
  opacity: 1;
  border-top: 1px solid var(--border);
  max-height: 400px;
  margin-top: 20px;
  padding-top: 20px;
}

.tech-badge {
  background: var(--border);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: SF Mono, Monaco, monospace;
  font-size: 11px;
}

/*# sourceMappingURL=src_app_globals_91e4631d.css.map*/