/* Modern Business Intelligence — Sunlit Greenhouse Editorial (DESIGN.md) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Colors */
  --color-pale-sage: #eef2e3;
  --color-paper-white: #fcfcfc;
  --color-ink-black: #000000;
  --color-charcoal: #242423;
  --color-deep-forest: #043f2e;
  --color-chartreuse-lime: #c8f169;
  --color-forest-mid: #2a6f2b;
  --color-vivid-green: #78c51c;
  --color-muted-sage: #dfe7d4;
  --color-border-subtle: rgba(4, 63, 46, 0.12);
  --color-border-medium: rgba(4, 63, 46, 0.22);

  /* Typography */
  --font-grenette: 'Fraunces', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-graphik: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Border Radii */
  --radius-tags: 9999px;
  --radius-cards: 16px;
  --radius-inputs: 4px;
  --radius-buttons: 4px;
}

/* Global resets & typography */
html, body {
  background-color: var(--color-pale-sage) !important;
  color: var(--color-deep-forest);
  font-family: var(--font-graphik);
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* Typography Helpers */
.font-serif-heading {
  font-family: var(--font-grenette) !important;
  letter-spacing: -0.025em;
  font-weight: 500;
}

.font-eyebrow {
  font-family: var(--font-graphik);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}

/* Surfaces */
.surface-canvas {
  background-color: var(--color-pale-sage);
}

.surface-card {
  background-color: var(--color-paper-white);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-cards);
}

.surface-forest {
  background-color: var(--color-deep-forest);
  color: var(--color-paper-white);
  border-radius: var(--radius-cards);
}

.surface-sage-tint {
  background-color: var(--color-pale-sage);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-cards);
}

/* Active Navigation Tabs */
.tab-btn {
  font-family: var(--font-graphik);
  font-weight: 500;
  border-radius: 4px;
  color: var(--color-deep-forest);
  transition: all 0.15s ease-in-out;
}

.tab-btn:hover {
  background-color: rgba(4, 63, 46, 0.06);
}

.tab-btn.active-tab {
  background-color: var(--color-deep-forest) !important;
  color: var(--color-paper-white) !important;
  box-shadow: none !important;
}

.tab-btn.active-tab .badge-count {
  background-color: var(--color-chartreuse-lime) !important;
  color: var(--color-ink-black) !important;
}

/* Chartreuse Primary Buttons */
.btn-chartreuse {
  background-color: var(--color-chartreuse-lime) !important;
  color: var(--color-ink-black) !important;
  font-weight: 600;
  border-radius: 4px !important;
  border: 1px solid transparent;
  transition: background-color 0.15s ease-in-out, transform 0.1s ease;
}

.btn-chartreuse:hover {
  background-color: #b5e655 !important;
}

.btn-chartreuse:active {
  transform: translateY(1px);
}

/* Forest Ghost / Outline Buttons */
.btn-forest-ghost {
  background-color: transparent;
  color: var(--color-deep-forest);
  border: 1px solid var(--color-border-medium);
  border-radius: 4px !important;
  font-weight: 500;
  transition: all 0.15s ease-in-out;
}

.btn-forest-ghost:hover {
  background-color: rgba(4, 63, 46, 0.05);
  border-color: var(--color-deep-forest);
}

/* Inputs & Form Controls */
input, select, textarea {
  font-family: var(--font-graphik);
  border-radius: 4px !important;
  border: 1px solid var(--color-border-medium) !important;
  background-color: var(--color-paper-white) !important;
  color: var(--color-deep-forest) !important;
  transition: border-color 0.15s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--color-deep-forest) !important;
  box-shadow: 0 0 0 1px var(--color-deep-forest) !important;
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-pale-sage);
}

::-webkit-scrollbar-thumb {
  background: #cbd8c2;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #aabf9d;
}

/* Toast Animation */
@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.toast-item {
  animation: slideInUp 0.2s ease-out forwards;
  border-radius: 8px !important;
}

/* Status Badges */
.badge-chartreuse {
  background-color: var(--color-chartreuse-lime);
  color: var(--color-ink-black);
  border-radius: 9999px;
  font-weight: 600;
}

.badge-forest {
  background-color: var(--color-deep-forest);
  color: var(--color-paper-white);
  border-radius: 9999px;
}

.badge-sage {
  background-color: #dbe4ce;
  color: var(--color-deep-forest);
  border-radius: 9999px;
}