frontend/src/index.css

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

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Inter", "Noto Sans Devanagari", system-ui, -apple-system, sans-serif;
  font-feature-settings: "cv11", "ss01";
  background: #ffffff;
  color: #1a2230;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:root {
  --hazard: #ff6b21;
  --muted-ink: #5b6b73;
  --card-bg: #ffffff;
  --paper: #f7fafc;
}

.bg-paper { background: var(--paper); }
.border-line { border-color: #e6eef2; }

/* subtle lift on hover for actionable items */
.hover-lift { transition: transform .18s ease, box-shadow .18s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(26,34,48,0.06); }

/* gentle pulse for camera CTA */
@keyframes pulseBorder { 0% { box-shadow: 0 0 0 0 rgba(255,107,33,0.32);} 70% { box-shadow: 0 0 0 10px rgba(255,107,33,0); } 100% { box-shadow: 0 0 0 0 rgba(255,107,33,0); } }
.pulse { animation: pulseBorder 2.4s infinite; }

/* card and image transitions */
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.card-fade { animation: fadeUp .28s ease both; }
.img-appear { animation: fadeUp .36s ease both; }

@keyframes tickerMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-track {
  display: flex;
  width: max-content;
  gap: 1rem;
  align-items: center;
  animation: tickerMove 22s linear infinite;
}
.ticker-item {
  flex: 0 0 auto;
  white-space: nowrap;
}
.ticker-track:hover {
  animation-play-state: paused;
}

/* clean small utility tweaks */
.btn-ghost { background: transparent; border: 1px solid #e6eef2; }
.eyebrow { letter-spacing: 0.12em; text-transform: uppercase; }

/* Government tricolour rule — used at the very top of each view. */
.tricolour {
  height: 3px;
  background: linear-gradient(
    to right,
    #ff9933 0 33.33%,
    #ffffff 33.33% 66.66%,
    #138808 66.66% 100%
  );
}

/* Tight, institutional headings. */
.wordmark {
  letter-spacing: -0.02em;
}
.eyebrow {
  letter-spacing: 0.12em;
  text-transform: uppercase;
}