@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary: #006194;
  --primary-container: #007bb9;
  --on-primary: #ffffff;
  --secondary: #006a61;
  --secondary-container: #86f2e4;
  --on-secondary: #ffffff;
  --tertiary: #006195;
  --background: #faf8ff;
  --on-surface: #131b2e;
  --on-surface-variant: #3f4850;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f2f3ff;
  --surface-container: #eaedff;
  --surface-container-high: #e2e7ff;
  --outline: #707881;
  --outline-variant: #bfc7d2;
  --error: #ba1a1a;
  --error-container: #ffdad6;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--background);
  color: var(--on-surface);
  line-height: 1.5;
}

h1, h2, h3, h4, .font-headline {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
}

/* Material symbol baseline alignment */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Custom subtle scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Tab active state */
.tab-btn.active {
  background-color: #006194 !important;
  color: #ffffff !important;
}

/* Result card styling */
.result-card-anim {
  animation: fadeIn 0.25s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}