/* ==========================================================================
   THE NEWS FRONTLINE — Jagran Business News style theme override
   Loaded AFTER the compiled app stylesheet so these rules win the cascade.
   This file re-maps the existing Tailwind utility classes already compiled
   into index-v3fix3.css to the new brand palette — no layout/markup logic
   is touched, only colors.

   Primary Color:      #D71920
   Primary Hover:       #B5121A
   Background:          #FFFFFF
   Secondary Background:#F5F5F5
   Border Color:        #E5E5E5
   Primary Text:        #1A1A1A
   Secondary Text:      #666666
   Success Green:       #16A34A  (already the Tailwind default — no change needed)
   Negative Red:        #DC2626  (already the Tailwind default — no change needed)
   Accent Gold:         #F4C430  (kept for the real Gold/Silver rate cards)

   NOTE: bg-blue-600 / bg-pink-600 (Facebook / Instagram hover) and the
   from-amber-500/to-yellow-500, from-amber-600/to-amber-400, and
   from-yellow-700/to-yellow-500 gradient pairs (the actual 24K/22K/18K gold
   rate cards) are intentionally left untouched — they are authentic social
   brand colors / real commodity colors, not theme chrome.
   ========================================================================== */

/* ---------- Red (Primary) ---------- */
.bg-red-50{background-color:#FDECEC!important}
.bg-red-500{background-color:#D71920!important}
.bg-red-600{background-color:#D71920!important}
.bg-red-700{background-color:#B5121A!important}
.border-red-100{border-color:#F6D3D4!important}
.hover\:bg-red-50:hover{background-color:#FDECEC!important}
.hover\:bg-red-100:hover{background-color:#F6D3D4!important}
.hover\:bg-red-600:hover{background-color:#D71920!important}
.hover\:bg-red-700:hover{background-color:#B5121A!important}
.hover\:border-red-600:hover{border-color:#D71920!important}
.hover\:border-red-700:hover{border-color:#B5121A!important}
.hover\:text-red-600:hover{color:#D71920!important}
.text-red-400{color:#D71920!important}
.text-red-500{color:#D71920!important}
.text-red-600{color:#D71920!important}
.text-red-700{color:#B5121A!important}
.from-red-600{--tw-gradient-from:#D71920 var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(215 25 32 / 0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.to-red-500{--tw-gradient-to:#B5121A var(--tw-gradient-to-position)!important}

/* ---------- Amber → Primary Red (nav, CTAs, badges, links) ---------- */
.bg-amber-50{background-color:#F5F5F5!important}
.bg-amber-50\/30{background-color:#F5F5F5!important}
.bg-amber-100{background-color:#F5F5F5!important}
.bg-amber-500{background-color:#D71920!important}
.bg-amber-500\/10{background-color:rgba(215,25,32,.08)!important}
.border-amber-100{border-color:#E5E5E5!important}
.border-amber-200{border-color:#E5E5E5!important}
.border-amber-400{border-color:#D71920!important}
.border-amber-500{border-color:#D71920!important}
.focus\:border-amber-400:focus{border-color:#D71920!important}
.focus\:ring-amber-100:focus{--tw-ring-color:rgba(215,25,32,.15)!important}
.hover\:bg-amber-100:hover{background-color:#ECECEC!important}
.hover\:bg-amber-50\/60:hover{background-color:#F5F5F5!important}
.hover\:bg-amber-600:hover{background-color:#B5121A!important}
.hover\:border-amber-200:hover{border-color:#E5E5E5!important}
.hover\:border-amber-300:hover{border-color:#D71920!important}
.hover\:border-amber-400\/50:hover{border-color:rgba(215,25,32,.5)!important}
.hover\:text-amber-400:hover{color:#D71920!important}
.hover\:text-amber-600:hover{color:#D71920!important}
.hover\:text-amber-700:hover{color:#B5121A!important}
.ring-amber-200{--tw-ring-color:#E5E5E5!important}
.text-amber-400{color:#D71920!important}
.text-amber-500{color:#D71920!important}
.text-amber-600{color:#D71920!important}
.text-amber-700{color:#B5121A!important}
.from-amber-400{--tw-gradient-from:#D71920 var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(215 25 32 / 0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}

/* ---------- Gray → Primary/Secondary text, borders, footer ---------- */
.bg-gray-50{background-color:#F5F5F5!important}
.bg-gray-100{background-color:#F5F5F5!important}
.bg-gray-800{background-color:#1A1A1A!important}
.bg-gray-900{background-color:#1A1A1A!important}
.border-gray-100{border-color:#E5E5E5!important}
.border-gray-200{border-color:#E5E5E5!important}
.border-gray-300{border-color:#E5E5E5!important}
.text-gray-500{color:#666666!important}
.text-gray-600{color:#666666!important}
.text-gray-700{color:#1A1A1A!important}
.text-gray-800{color:#1A1A1A!important}
.text-gray-900{color:#1A1A1A!important}
.hover\:bg-gray-100:hover{background-color:#ECECEC!important}
.hover\:bg-gray-200:hover{background-color:#E5E5E5!important}
.hover\:bg-gray-900:hover{background-color:#1A1A1A!important}
.hover\:border-gray-900:hover{border-color:#1A1A1A!important}
.hover\:text-gray-600:hover{color:#1A1A1A!important}
.hover\:text-gray-700:hover{color:#1A1A1A!important}
.from-gray-900{--tw-gradient-from:#1A1A1A var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(26 26 26 / 0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.via-gray-900{--tw-gradient-to:rgb(26 26 26 / 0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),#1A1A1A var(--tw-gradient-via-position),var(--tw-gradient-to)!important}
.to-gray-800{--tw-gradient-to:#262626 var(--tw-gradient-to-position)!important}
.from-gray-950{--tw-gradient-from:#0D0D0D var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(13 13 13 / 0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.to-gray-950{--tw-gradient-to:#0D0D0D var(--tw-gradient-to-position)!important}

/* ---------- Top utility bar: yellow -> black ---------- */
/* (background already switched to bg-black in the JS bundle; this just
   keeps the red "live" dot and text readable on black) */
#tnf-live-clock{color:#FFFFFF}
#tnf-live-clock .bg-red-500{background-color:#FF3B30!important}

/* ---------- Fix: font-extrabold was purged from the Tailwind build,
   so header nav links (Home, Latest News, Stock Market, etc.) were
   rendering at normal weight instead of bold ---------- */
.font-extrabold{font-weight:800 !important}

/* ---------- Nav links: bold + blink/pop animation ---------- */
@keyframes tnfNavBlinkPop{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(1.08)}
}
.tnf-nav-blink{animation:tnfNavBlinkPop 1.6s ease-in-out infinite}
#tnf-live-clock.tnf-nav-blink{animation:tnfNavBlinkPop 1.2s ease-in-out infinite}

/* ---------- Cards: soft shadow + red underline on hover ---------- */
.border-amber-100.hover\:shadow-xl:hover,
.border-gray-100.hover\:shadow-xl:hover{
  box-shadow:0 10px 25px -5px rgba(26,26,26,.08),0 8px 10px -6px rgba(26,26,26,.06)!important;
}