/* Orzatty Design System (ODS) - Core Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ODS Colors */
  --ods-primary: #004173;
  --ods-on-primary: #FFFFFF;
  --ods-secondary: #F27435;
  --ods-on-secondary: #FFFFFF;
  
  /* M3 Surface Colors */
  --m3-surface: #FDFBFF;
  --m3-on-surface: #1A1C1E;
  --m3-surface-variant: #F1F4F9;
  --m3-on-surface-variant: #44474E;
  --m3-outline: #74777F;
  --m3-outline-variant: #C4C6D0;

  /* M3 Elevations */
  --m3-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
  --m3-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
  --m3-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--m3-surface);
  color: var(--m3-on-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.4s cubic-bezier(0.2, 0, 0, 1) forwards;
}

/* Loader */
.expressive-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.expressive-loader div {
  width: 12px;
  height: 12px;
  background-color: var(--ods-primary);
  border-radius: 50%;
  animation: pulse 1.2s cubic-bezier(0.2, 0, 0, 1) infinite alternate;
}

.expressive-loader div:nth-child(2) {
  animation-delay: 0.2s;
}

.expressive-loader div:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1.2); opacity: 1; }
}

/* Search Bar focus transitions */
.search-input-container {
  transition: box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1), transform 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.search-input-container:focus-within {
  box-shadow: var(--m3-elevation-3);
  transform: translateY(-1px);
}

/* Results View Transitions */
.results-card {
  transition: box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1), transform 0.3s cubic-bezier(0.2, 0, 0, 1);
  will-change: transform, box-shadow;
}

.results-card:hover {
  box-shadow: var(--m3-elevation-2);
  transform: translateY(-2px);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--m3-surface);
}
::-webkit-scrollbar-thumb {
  background: var(--m3-outline-variant);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--m3-outline);
}

/* Utility to hide elements cleanly */
.hidden-state {
  display: none !important;
}