/* ═══════════════════════════════════════════════════════════════════════════
   MNA Design Tokens v2.0.0  —  MyNaukriAlert.com
   ═══════════════════════════════════════════════════════════════════════════
   SINGLE SOURCE OF TRUTH for the entire site's visual identity.
   To rebrand the site, edit ONLY the values below — every CSS file reads
   from these variables via var(--mna-*).

   REBRAND v2.0 — 10-04-2026
   ✦ Primary colour changed: Orange (#ff7b24) → Royal Blue (#2563EB)
   ✦ Purple (#667eea) removed — merged into blue family (one clean hue)
   ✦ New Accent: Warm Amber (#F59E0B) — for highlights, CTAs, bullets
   ✦ Result: professional, trustworthy government-job-portal aesthetic

   USAGE IN OTHER CSS FILES:
     background: var(--mna-orange);      ← now resolves to #2563EB (blue)
     color: var(--mna-text-primary);

   HOW TO CHANGE BRAND COLOR IN FUTURE:
     1. Change --mna-orange to your new primary
     2. Adjust --mna-orange-light, --mna-orange-dark, --mna-orange-darker
     3. Save & clear cache — entire site updates instantly
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Primary Blue (was: Brand Orange) ─────────────────────────────────── */
  --mna-orange: #2563EB;
  /* Primary brand colour — buttons, bullets, focus rings, active states  */
  --mna-orange-aa: #1D4ED8;
  /* WCAG AA — white-text backgrounds (≥4.5:1 on white)                   */
  --mna-orange-light: #DBEAFE;
  /* Soft highlights, gradient ends, chip borders                         */
  --mna-orange-dark: #1E40AF;
  /* Hover states, footer column headings                                 */
  --mna-orange-darker: #1e3a8a;
  /* Active / pressed states                                              */

  /* ── Accent Amber (new — subtle warm highlight) ────────────────────────── */
  --mna-accent: #F59E0B;
  /* ⚠ USE AS BACKGROUND ONLY (dark text on top) — NOT as text on white  */
  /* Amber on white = 2.14:1 (FAILS WCAG). Use --mna-orange for text.    */
  /* Safe uses: badge backgrounds, button bg, decorative borders          */
  --mna-accent-light: #FDE68A;
  /* Very pale amber — safe as background tint only                       */
  --mna-accent-dark: #D97706;
  /* Darker amber — still fails text-on-white, use as bg only            */
  --mna-accent-pale: #FFFBEB;
  /* Lightest amber wash — safe as section background                     */

  /* ── Blue Palette (replaces purple — unified hue family) ──────────────── */
  --mna-purple: #2563EB;
  /* ← kept for backward-compat — same as primary blue now               */
  --mna-purple-dark: #1D4ED8;
  /* ← kept for backward-compat — same as blue-dark now                  */
  --mna-purple-bg: #EFF6FF;
  /* Category bar background — cool blue-pale (was purple-tinted)        */

  /* ── Links ────────────────────────────────────────────────────────────── */
  --mna-link: #2563EB;
  /* Default link colour — harmonised with primary blue                  */
  --mna-link-hover: #1D4ED8;
  /* Link hover state                                                     */
  --mna-link-visited: #6D28D9;
  /* Visited link — kept purple per browser convention                   */

  /* ── Text Hierarchy ───────────────────────────────────────────────────── */
  --mna-text-primary: #111827;
  /* Headings, titles, strong text                                        */
  --mna-text-body: #374151;
  /* Body paragraphs, general content                                     */
  --mna-text-muted: #555555;
  /* Secondary text, descriptions                                         */
  --mna-text-light: #6b7280;
  /* Captions, metadata, timestamps                                       */

  /* ── Surfaces & Backgrounds ───────────────────────────────────────────── */
  --mna-white: #ffffff;
  --mna-bg-light: #f9fafb;
  /* Page backgrounds, input fields (slightly cooler than old #f8f9fa)   */
  --mna-bg-dark: #0f172a;
  /* Footer, dark sections — premium deep slate (was #1a1a1a)            */

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --mna-border: #e5e7eb;
  /* Card borders, container edges                                        */
  --mna-border-light: #f0f2f5;
  /* Table row dividers, subtle separators                                */

  /* ── Tables ───────────────────────────────────────────────────────────── */
  --mna-table-header: #1E293B;
  /* ALL table headers — dark charcoal (swapped: H2=blue, table=dark) */
  --mna-table-alt-row: #EFF6FF;
  /* Alternating row background — cool blue-pale (was greenish #f7f9e8)  */

  /* ── Status Badges ────────────────────────────────────────────────────── */
  --mna-badge-today: #DC2626;
  /* "New Today" — red with pulse                                         */
  --mna-badge-soon: #F59E0B;
  /* "Closing Soon" — amber (uses new accent)                            */
  --mna-badge-expired: #6b7280;
  /* "Expired" — neutral grey (was burnt orange)                         */

  /* ── Social Platform Colors ───────────────────────────────────────────── */
  --mna-facebook: #3b5998;
  --mna-twitter: #000000;
  --mna-whatsapp: #128C7E;
  /* WhatsApp brand dark green — 4.6:1 on white ✅ (was #25d366 = 1.8:1 ❌) */
  --mna-telegram: #0088cc;
  --mna-linkedin: #0a66c2;
  --mna-pinterest: #bd081c;
  --mna-reddit: #ff4500;
  --mna-youtube: #ff0000;
  --mna-instagram: #e4405f;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --mna-shadow-sm: 0 1px 3px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .04);
  --mna-shadow-md: 0 4px 16px rgba(37, 99, 235, .10);
  /* Blue-tinted mid shadow */
  --mna-shadow-lg: 0 10px 40px rgba(37, 99, 235, .12);
  /* Blue-tinted large shadow */

  /* ── Border Radius ────────────────────────────────────────────────────── */
  --mna-radius-lg: 16px;
  --mna-radius-md: 10px;
  --mna-radius-sm: 6px;
  --mna-radius-pill: 50px;
  /* Fully rounded pills / badges                   */

  /* ── Font Stack ───────────────────────────────────────────────────────── */
  --mna-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* ── Spacing (Optional — for future use) ──────────────────────────────── */
  --mna-header-height: 60px;
  /* Sticky header offset                            */
}


/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL BASE STYLES
   Applied once via this file — individual CSS files do NOT redefine these.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Global font — eliminates the need for font-family in every CSS file */
body {
  font-family: var(--mna-font);
}

/* Focus-visible default — ensures keyboard navigation is always visible */
:focus-visible {
  outline: 3px solid #2563EB;   /* blue — was var(--mna-orange) */
  outline-offset: 2px;
  border-radius: 3px;
}

/* Reduced motion — global safety net */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}