/* Trove Design Tokens — per Trove Design Elevation Guide */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* Light theme (default) */
  --bg: #F5F5F0;
  --surface: #FFFFFF;
  --surface-2: #FAFAF7;
  --surface-3: #F0F0EB;
  --surface-4: #E8E8E3;
  --text-1: #1A1A1A;
  --text-2: #4A4A4A;
  --text-3: #7A7A7A;
  --text-4: #A8A8A8;
  --border: #E8E8E3;
  --border-sub: #F0F0EB;
  --nav-bg: rgba(255, 255, 255, 0.82);

  /* Accents */
  --blue: #2563EB;
  --blue-hover: #1D4ED8;
  --blue-bg: #EFF6FF;
  --blue-text: #1E40AF;
  --green-bg: #ECFDF5;
  --green-text: #047857;
  --amber-bg: #FFF7ED;
  --amber-text: #C2410C;
  --red-bg: #FEF2F2;
  --red-text: #DC2626;
  --select-bg: #EFF6FF;
  --check-border: #C8C8C0;

  /* Spacing (8px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Motion */
  --t-fast: 100ms;
  --t-base: 160ms;
  --t-slow: 260ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.02);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-bulk: 0 8px 32px rgba(0,0,0,0.25);

  /* Radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 18px;

  /* Density (overridden by tweaks) */
  --row-py: 12px;
  --row-px: 16px;
  --thumb: 44px;
}

[data-theme="dark"] {
  --bg: #0F0F0F;
  --surface: #1A1A1A;
  --surface-2: #1F1F1F;
  --surface-3: #262626;
  --surface-4: #333333;
  --text-1: #F0F0F0;
  --text-2: #B0B0B0;
  --text-3: #787878;
  --text-4: #555555;
  --border: #2A2A2A;
  --border-sub: #222222;
  --nav-bg: rgba(18, 18, 18, 0.82);

  --blue: #3B82F6;
  --blue-hover: #2563EB;
  --blue-bg: rgba(59, 130, 246, 0.12);
  --blue-text: #93C5FD;
  --green-bg: rgba(16, 185, 129, 0.12);
  --green-text: #6EE7B7;
  --amber-bg: rgba(245, 158, 11, 0.12);
  --amber-text: #FCD34D;
  --red-bg: rgba(239, 68, 68, 0.12);
  --red-text: #FCA5A5;
  --select-bg: rgba(59, 130, 246, 0.10);
  --check-border: #3a3a3a;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-bulk: 0 8px 32px rgba(0,0,0,0.5);
}

[data-density="compact"] {
  --row-py: 8px;
  --row-px: 12px;
  --thumb: 36px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
}

button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
input, textarea, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }

.mono { font-family: 'DM Mono', ui-monospace, Menlo, monospace; }

/* Scrollbar — minimal */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translate(-50%, 80px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.fade-up { animation: fadeUp var(--t-base) var(--ease) both; }
.fade-in { animation: fadeIn var(--t-base) var(--ease) both; }

/* Utility */
.tooltip-host { position: relative; }
.tooltip-host[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-1);
  color: var(--bg);
  font-size: 10px;
  font-weight: 600;
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 200;
  animation: fadeIn var(--t-fast) var(--ease) both;
}
.tooltip-below[data-tip]:hover::after {
  bottom: auto;
  top: calc(100% + 6px);
}