/* ═══════════════════════════════════════════════════════
   assets/css/style.css
   Global design tokens shared across landing + portal
   Font: Geist (modern, clean, production-grade)
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Noto+Sans+Devanagari:wght@300;400;500&display=swap');
@import url('../fonts/fonts.css');

/* ── Design tokens ── */
:root {
  /* Brand */
  --gold:       #C8860A;
  --gold-lt:    #E8A020;
  --gold-pale:  #FEF6E4;
  --gold-ring:  rgba(200,134,10,0.18);

  /* Navy */
  --navy-950:   #040E1C;
  --navy-900:   #071830;
  --navy-800:   #0D2647;
  --navy-700:   #163B6A;
  --navy-400:   #3D6EA8;
  --navy-200:   #8AAED4;
  --navy-100:   #C4D8EE;
  --navy-50:    #EDF3FA;

  /* Neutral surface palette */
  --bg:         #F6F8FB;
  --surface:    #FFFFFF;
  --surface-2:  #F1F5F9;
  --border:     #E2E8F0;
  --border-md:  #CBD5E1;

  /* Text */
  --text:       #0F1E35;
  --text-md:    #334155;
  --text-lt:    #64748B;
  --text-xlt:   #94A3B8;

  /* Semantic */
  --green:      #15803D;
  --green-bg:   #F0FDF4;
  --green-bd:   #BBF7D0;
  --amber:      #92400E;
  --amber-bg:   #FFFBEB;
  --amber-bd:   #FDE68A;
  --red:        #B91C1C;
  --red-bg:     #FEF2F2;
  --red-bd:     #FECACA;
  --blue:       #1D4ED8;
  --blue-bg:    #EFF6FF;
  --blue-bd:    #BFDBFE;

  /* Tricolor */
  --saffron:    #FF9933;
  --india-green:#138808;

  /* Typography */
  --font:       'Geist', system-ui, -apple-system, sans-serif;
  --font-hindi: 'Noto Sans Devanagari', sans-serif;
  --font-mono:  'Geist Mono', 'Fira Code', monospace;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(15,30,53,0.06);
  --shadow-sm: 0 1px 6px rgba(15,30,53,0.08), 0 0 0 1px rgba(15,30,53,0.04);
  --shadow-md: 0 4px 16px rgba(15,30,53,0.10), 0 0 0 1px rgba(15,30,53,0.04);
  --shadow-lg: 0 16px 40px rgba(15,30,53,0.14), 0 0 0 1px rgba(15,30,53,0.04);
  --shadow-xl: 0 32px 80px rgba(15,30,53,0.20);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); color: var(--text); background: var(--surface); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { display: block; max-width: 100%; }
button { font-family: var(--font); }
a { color: inherit; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-xlt); }

/* ── Tricolor bar ── */
.tricolor {
  display: flex; height: 4px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
}
.tricolor span:nth-child(1) { flex: 1; background: var(--saffron); }
.tricolor span:nth-child(2) { flex: 1; background: #fff; }
.tricolor span:nth-child(3) { flex: 1; background: var(--india-green); }

/* ── Utility classes ── */
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.hindi { font-family: var(--font-hindi); }
.mono  { font-family: var(--font-mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-size: 14px; font-weight: 600;
  padding: 10px 20px; border-radius: var(--r);
  border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap; letter-spacing: -0.1px;
}
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.btn-gold {
  background: var(--gold); color: #fff; border-color: var(--gold);
  box-shadow: 0 1px 3px rgba(200,134,10,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-gold:hover { background: #B07608; border-color: #B07608; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(200,134,10,0.4); }
.btn-gold:active { transform: translateY(0); }

.btn-navy {
  background: var(--navy-900); color: #fff; border-color: var(--navy-900);
  box-shadow: 0 1px 3px rgba(7,24,48,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn-navy:hover { background: var(--navy-800); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(7,24,48,0.35); }

.btn-outline {
  background: transparent; color: var(--text-md); border-color: var(--border-md);
}
.btn-outline:hover { border-color: var(--text-md); color: var(--text); background: var(--bg); }

.btn-ghost {
  background: transparent; border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.85);
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.5); color: #fff; background: rgba(255,255,255,0.07); }

.btn-lg { font-size: 15px; padding: 13px 28px; }
.btn-sm { font-size: 13px; padding: 7px 14px; }

/* ── Form elements ── */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: 13px; font-weight: 500; color: var(--text-md); }
.input {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r); background: var(--surface);
  font-family: var(--font); font-size: 14px; color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.input::placeholder { color: var(--text-xlt); }
.input:hover { border-color: var(--border-md); }
.input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-ring); }
.input:read-only { background: var(--bg); color: var(--text-lt); cursor: not-allowed; }

/* ── Status pills ── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1px;
}
.pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.pill-green  { background: var(--green-bg); color: var(--green); }
.pill-green::before { background: var(--green); }
.pill-amber  { background: var(--amber-bg); color: var(--amber); }
.pill-amber::before { background: #D97706; }
.pill-red    { background: var(--red-bg); color: var(--red); }
.pill-red::before { background: var(--red); }
.pill-blue   { background: var(--blue-bg); color: var(--blue); }
.pill-blue::before { background: var(--blue); animation: blink 1.4s infinite; }
.pill-gray   { background: var(--surface-2); color: var(--text-lt); border: 1px solid var(--border); }
.pill-gray::before { background: var(--text-xlt); }

@keyframes blink { 50% { opacity: 0.35; } }

/* ── Card ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}

/* ── Toast ── */
#toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: var(--text); color: #fff;
  padding: 11px 18px; border-radius: var(--r);
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  transform: translateY(12px); opacity: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none; display: flex; align-items: center; gap: 8px;
  max-width: 340px;
}
#toast.show { transform: translateY(0); opacity: 1; }
#toast.toast-success { background: #166534; }
#toast.toast-error   { background: #991B1B; }
#toast.toast-info    { background: var(--navy-800); }

/* ── Reveal animation ── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }
.delay-4 { transition-delay: 0.32s; }