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

:root {
  --navy-950: #0B1220;
  --navy-900: #111A2E;
  --navy-800: #1B2740;
  --blue-600: #2954E5;
  --blue-700: #1F42BD;
  --violet-500: #7C6FE0;
  --slate-50: #F7F8FA;
  --slate-100: #EEF1F5;
  --border: #E4E7EC;
  --charcoal-800: #232733;
  --charcoal-500: #6B7280;
  --success: #1A9E6B;
  --warning: #B5750A;
  --danger: #D64545;
}

* { -webkit-font-smoothing: antialiased; }

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--charcoal-800);
}

.font-display { font-family: 'Fraunces', Georgia, serif; }

/* Quiet, thin scrollbars instead of default chunky ones */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C6CBD4; border-radius: 8px; }

/* Visible, on-brand focus ring — never remove focus outlines outright */
:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--blue-600);
  color: #fff;
  transition: background-color .15s ease, transform .1s ease;
}
.btn-primary:hover { background: var(--blue-700); }
.btn-primary:active { transform: scale(0.98); }

.badge-dot::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
  margin-right: 6px;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.toast-anim { animation: toast-in .2s ease-out; }

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #EEF1F5 25%, #E4E7EC 37%, #EEF1F5 63%);
  background-size: 400px 100%;
  animation: shimmer 1.4s ease infinite;
}

/* Live-preview device frame on the dashboard */
.preview-frame {
  border: 10px solid var(--navy-950);
  border-radius: 2.5rem;
  box-shadow: 0 20px 60px -20px rgba(11,18,32,0.35);
}