/* =========================================================
   INDIAGRAM - Global Brand Override
   Applies the company presentation palette site-wide:
     Font:       Sora (replaces Inter / Space Grotesk)
     Background: #FEF6F0 (cream)  /  dark: #1A1618
     Brand:      #FB5F14 (orange) + #FBD73D (yellow)
     Text:       #231F20 (rich black)
   Loaded on every page AFTER page-specific styles so these
   take precedence without touching layout or structure.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap');

/* ---- 1. Root-level token overrides (reinforce on every page) ---- */
:root,
[data-theme="light"],
html:not([data-theme="dark"]) {
  /* Surfaces */
  --bg:      #FEF6F0;
  --surface: #FFFFFF;
  --surface2:#FDF0E6;
  --border:  #F0DDD0;
  --border2: #E5C9B5;

  /* Brand */
  --saffron:  #FB5F14;
  --saffron2: #FBD73D;
  --orange:   #FB5F14;
  --yellow:   #FBD73D;
  --green:    #046A38;
  --teal:     #FB5F14;
  --red:      #C0392B;

  /* Typography */
  --text:  #231F20;
  --muted: #7A6F6F;

  /* Aliases used across pages */
  --saffron-dim:  rgba(251,95,20,0.1);
  --saffron-glow: rgba(251,95,20,0.2);
  --teal-dim:     rgba(251,215,61,0.12);
  --teal-glow:    rgba(251,215,61,0.22);
}

[data-theme="dark"],
html.dark {
  --bg:      #1A1618;
  --surface: #231F20;
  --surface2:#2C2728;
  --border:  #3D3535;
  --border2: #4F4444;

  --saffron:  #FB5F14;
  --saffron2: #FBD73D;
  --orange:   #FB5F14;
  --yellow:   #FBD73D;
  --green:    #138808;
  --teal:     #FBD73D;
  --red:      #E63946;

  --text:  #FEF6F0;
  --muted: #B8A99E;

  --saffron-dim:  rgba(251,95,20,0.12);
  --saffron-glow: rgba(251,95,20,0.25);
  --teal-dim:     rgba(251,215,61,0.1);
  --teal-glow:    rgba(251,215,61,0.2);
}

/* ---- 2. Global font override ---- */
*,
*::before,
*::after {
  font-family: 'Sora', sans-serif !important;
}

/* Keep monospace elements monospace */
code, pre, kbd, samp,
.font-mono, [class*="mono"],
.mono-label, .ig-stat-chip,
.ig-nav-item-badge, .ig-nav-group-btn {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
}

/* ---- 3. Body background and colour ---- */
body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

[data-theme="dark"] body,
html.dark body {
  background-color: #1A1618 !important;
  color: #FEF6F0 !important;
}

/* ---- 4. Remap old CSS variable names used in existing page CSS ---- */
/* Pages use --bg, --surface, --saffron, --teal, --text etc. — those are
   already overridden above so existing var() calls automatically get the
   new palette. No class changes needed. */

/* ---- 5. Hard-coded hex overrides for values baked into Tailwind classes ---- */
/* Old dark bg */
.bg-\[\#070C18\], [style*="background:#070C18"], [style*="background: #070C18"] {
  background-color: #1A1618 !important;
}
.bg-\[\#0C1220\], [style*="background:#0C1220"] {
  background-color: #231F20 !important;
}

/* Old saffron orange */
.text-\[\#FF671F\], .text-\[\#FF9933\] { color: #FB5F14 !important; }
.bg-\[\#FF671F\]  { background-color: #FB5F14 !important; }
.border-\[\#FF671F\] { border-color: #FB5F14 !important; }

/* ---- 6. Scrollbar ---- */
* {
  scrollbar-color: #E5C9B5 #FEF6F0;
}
[data-theme="dark"] * {
  scrollbar-color: #4F4444 #1A1618;
}
::-webkit-scrollbar-track { background: var(--bg) !important; }
::-webkit-scrollbar-thumb { background: var(--border2) !important; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted) !important; }

/* ---- 7. Text selection ---- */
::selection {
  background: rgba(251,215,61,0.35) !important;
  color: #231F20 !important;
}

/* ---- 8. Page-specific nav/surface overrides ---- */
/* about.html, giribala/, etc. use var(--bg) and var(--surface) directly —
   those are covered by section 1. The entries below catch hard-coded hex
   values in the existing page <style> blocks. */

/* Old dark surfaces used in about.html and giribala pages */
nav,
.nav-logo,
.panel,
.panel-soft,
.arch-diagram,
.arch-layer {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

/* Old muted text colour remapped */
.text-muted,
[style*="color:#6B7A99"],
[style*="color: #6B7A99"],
[style*="color:#94A3B8"],
[style*="color: #E8EDF5"] {
  color: var(--muted) !important;
}

/* ---- 9. Gradient overrides for tricolor / brand strips ---- */
.text-gradient-saffron {
  background: linear-gradient(135deg, #FB5F14, #FBD73D) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ---- 10. Ensure Tailwind brand-* colour utilities use new palette ---- */
/* Tailwind resolves these at render time via its config, but for pages
   that load Tailwind from CDN with the updated tailwind.config in index.html
   the colours are already correct. For pages without an inline tailwind.config
   we override the most common utilities here. */
.text-brand-orange  { color: #FB5F14 !important; }
.text-brand-saffron { color: #FBD73D !important; }
.text-brand-teal    { color: #FB5F14 !important; }
.bg-brand-orange    { background-color: #FB5F14 !important; }
.bg-brand-saffron   { background-color: #FBD73D !important; }
.bg-brand-dark      { background-color: #1A1618 !important; }
.bg-brand-card      { background-color: #231F20 !important; }
.border-brand-border{ border-color: #3D3535 !important; }

/* Light mode overrides for dark Tailwind utilities */
[data-theme="light"] .bg-brand-dark { background-color: #FEF6F0 !important; }
[data-theme="light"] .bg-brand-card { background-color: #FFFFFF !important; }
[data-theme="light"] .border-brand-border { border-color: #F0DDD0 !important; }
[data-theme="light"] .text-slate-100,
[data-theme="light"] .text-white { color: #231F20 !important; }
[data-theme="light"] .text-slate-300,
[data-theme="light"] .text-slate-200 { color: #3D3838 !important; }
[data-theme="light"] .text-slate-400,
[data-theme="light"] .text-slate-500 { color: #7A6F6F !important; }
[data-theme="light"] .bg-slate-950,
[data-theme="light"] .bg-slate-900 { background-color: #FDF0E6 !important; }
[data-theme="light"] .bg-slate-900\/40,
[data-theme="light"] .bg-slate-900\/60,
[data-theme="light"] .bg-slate-900\/80 { background-color: #FDF0E6 !important; }
[data-theme="light"] .border-slate-700,
[data-theme="light"] .border-slate-800 { border-color: #E5C9B5 !important; }
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background-color: #FFFFFF !important;
  color: #231F20 !important;
  border-color: #F0DDD0 !important;
}

/* =========================================================
   HARDCODED HEX OVERRIDE PATCH
   Catches every baked-in dark value that bypasses variables.
   These use attribute selectors on style="" and direct
   element rules to force the new palette.
   ========================================================= */

/* ---- Body background: catch all old dark page backgrounds ---- */
/* These fire for BOTH light and dark because the palette is
   still warm/rich-black, never the old navy-blue-black */
body[style*="#070C18"],
body[style*="#0C1220"],
body[style*="#0D0D0D"],
body[style*="#111111"],
body[style*="#0b0d12"],
body[style*="#090909"],
body[style*="0D0D0D"],
body[style*="070C18"] {
  background: var(--bg) !important;
}

/* Catch gradient backgrounds baked into body style */
body[style*="linear-gradient"] {
  background: var(--bg) !important;
}

/* ---- The most robust fix: override body background globally ---- */
/* Every page's body should use the token, period. */
body {
  background-color: var(--bg) !important;
  background-image: none !important;
}

/* But allow intentional hero/section gradients to stay */
.hero-gradient,
.section-gradient,
[class*="gradient-bg"],
.ig-hero-bg {
  background-image: revert !important;
}

/* ---- Surface/card elements with hardcoded old dark hex ---- */
[style*="background:#0C1220"],
[style*="background: #0C1220"],
[style*="background-color:#0C1220"],
[style*="background:#070C18"],
[style*="background: #070C18"],
[style*="background:#0D0D0D"],
[style*="background: #0D0D0D"],
[style*="background:#111111"],
[style*="background: #111111"],
[style*="background:#1F1F1F"],
[style*="background: #1F1F1F"],
[style*="background:#0b0d12"],
[style*="background:#090909"] {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* ---- Border hardcodes ---- */
[style*="border:1px solid #1F1F1F"],
[style*="border: 1px solid #1F1F1F"],
[style*="border-color:#1F1F1F"],
[style*="border-color: #1F1F1F"],
[style*="border:1px solid #1E293B"],
[style*="border: 1px solid #1E293B"] {
  border-color: var(--border) !important;
}

/* ---- Old saffron hex directly in style attrs ---- */
[style*="color:#FF671F"],  [style*="color: #FF671F"]  { color: #FB5F14 !important; }
[style*="color:#FF9933"],  [style*="color: #FF9933"]  { color: #FBD73D !important; }
[style*="background:#FF671F"] { background: #FB5F14 !important; }
[style*="background:#FF9933"] { background: #FBD73D !important; }

/* ---- Inline style body backgrounds set via JS (giribala pages) ---- */
/* giribala/index.html sets radial gradients on body via inline style.
   We override with !important on the body selector above, which handles it.
   But also target the specific gradient pattern: */
body[style*="radial-gradient"] {
  background: var(--bg) !important;
  background-image: none !important;
}

/* ---- Page-specific CSS var redeclarations (pages that re-declare --bg etc.) ---- */
/* Pages like about.html declare :root { --bg:#070C18 } inside their own <style>.
   Our brand-override.css loads AFTER them and redeclares via :root so ours wins
   (already done above). But body{background:var(--bg)} needs !important because
   some pages set background directly. Covered by the body rule above. */

/* ---- Text colour fixes for pages with hardcoded light text on dark ---- */
/* When bg flips to cream, old #E8EDF5 / #E5E7EB text becomes invisible */
[style*="color:#E8EDF5"], [style*="color: #E8EDF5"] { color: var(--text) !important; }
[style*="color:#E5E7EB"], [style*="color: #E5E7EB"] { color: var(--text) !important; }

/* ---- Giribala / girbala panel classes ---- */
.panel        { background: var(--surface) !important; border-color: var(--border) !important; }
.panel-soft   { background: var(--surface) !important; border-color: var(--border) !important; }
.panel-glass  { background: var(--surface2) !important; border-color: var(--border) !important; }

/* Cases page hardcoded card styles (cases/girbala-judicial/*.html) */
.case-card,
.case-card-body,
[class*="case-"] {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ---- Tailwind slate utility overrides for hardcoded Tailwind dark classes ---- */
/* These fire everywhere and catch the most common offenders */
.bg-slate-950 { background-color: var(--surface2) !important; }
.bg-slate-900 { background-color: var(--surface2) !important; }
.bg-slate-800 { background-color: var(--surface3) !important; }
.text-slate-100, .text-slate-50 { color: var(--text) !important; }
.text-white { color: var(--text) !important; }
.border-slate-700, .border-slate-800, .border-slate-900 { border-color: var(--border2) !important; }

/* Dark mode: restore dark versions */
[data-theme="dark"] .bg-slate-950 { background-color: #1A1618 !important; }
[data-theme="dark"] .bg-slate-900 { background-color: #231F20 !important; }
[data-theme="dark"] .bg-slate-800 { background-color: #2C2728 !important; }
[data-theme="dark"] .text-slate-100,
[data-theme="dark"] .text-white { color: #FEF6F0 !important; }
[data-theme="dark"] .border-slate-700 { border-color: #4F4444 !important; }