/* ==========================================================================
   NATIONAL DEFENSE FORCES — DYNAMIC THEME + BACKGROUND ENGINE
   Color theme and background mode are independent.
   Default: data-theme="blue" + data-background="night"
   ========================================================================== */

:root {
    --primary: #0d6efd;
    --primary-hover: #0b5ed7;
    --secondary: #061a33;
    --accent: #1683ff;
    --accent-light: #5aa9ff;
    --bg-main: #03070c;
    --bg-section: #07111c;
    --bg-card: #0c1622;
    --bg-card-hover: #122033;
    --bg-navbar: rgba(3, 7, 12, 0.94);
    --bg-footer: #030609;
    --bg-topbar: #020508;
    --text-main: #f4f7fb;
    --text-secondary: #94a3b8;
    --text-muted: #7b8899;
    --text-heading: #ffffff;
    --text-on-primary: #ffffff;
    --text-topbar: #c5d0dc;
    --nav-link-color: #e8eef6;
    --nav-link-hover: var(--primary);
    --border-color: rgba(22, 131, 255, 0.16);
    --shadow-color: rgba(0, 0, 0, 0.55);
    --overlay: rgba(3, 7, 12, 0.55);
    --icon-color: #1683ff;
    --button-text: #ffffff;
    --input-bg: #0c1622;
    --input-text: #f4f7fb;
    --input-border: rgba(22, 131, 255, 0.22);
    --hero-overlay: linear-gradient(135deg, rgba(3, 7, 12, 0.92) 0%, rgba(6, 26, 51, 0.78) 55%, rgba(13, 110, 253, 0.28) 100%);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
    --card-shadow: var(--shadow-md);
    --pattern-opacity: 0.22;
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --theme-ease: 0.28s ease;
    --bg-ease: 0.35s ease;
    --dropdown-bg: #0c1622;
    --dropdown-text: #f4f7fb;
    --dropdown-hover: rgba(255, 255, 255, 0.06);
}

/* --------------------------------------------------------------------------
   COLOR THEMES — accents, buttons, links, icons, hero tint
   -------------------------------------------------------------------------- */

[data-theme="blue"] {
    --primary: #0d6efd;
    --primary-hover: #0b5ed7;
    --secondary: #061a33;
    --accent: #1683ff;
    --accent-light: #5aa9ff;
    --icon-color: #1683ff;
    --button-text: #ffffff;
    --hero-overlay: linear-gradient(135deg, rgba(3, 7, 12, 0.92) 0%, rgba(6, 26, 51, 0.78) 55%, rgba(13, 110, 253, 0.30) 100%);
}

[data-theme="green"] {
    --primary: #2f7d32;
    --primary-hover: #246628;
    --secondary: #102615;
    --accent: #4caf50;
    --accent-light: #78c77d;
    --icon-color: #4caf50;
    --button-text: #ffffff;
    --hero-overlay: linear-gradient(135deg, rgba(8, 16, 10, 0.93) 0%, rgba(16, 38, 21, 0.80) 55%, rgba(47, 125, 50, 0.32) 100%);
}







[data-theme="red"] {
    --primary: #dc3545;
    --primary-hover: #bb2d3b;
    --secondary: #3a0a10;
    --accent: #ff4d5d;
    --accent-light: #ff7b87;
    --icon-color: #ff4d5d;
    --button-text: #ffffff;
    --hero-overlay: linear-gradient(135deg, rgba(18, 5, 8, 0.93) 0%, rgba(58, 10, 16, 0.80) 55%, rgba(220, 53, 69, 0.32) 100%);
}

[data-theme="khaki"] {
    --primary: #c29b38;
    --primary-hover: #a68228;
    --secondary: #2b261f;
    --accent: #e6c265;
    --accent-light: #f0d58a;
    --icon-color: #e6c265;
    --button-text: #1a160f;
    --hero-overlay: linear-gradient(135deg, rgba(18, 16, 13, 0.93) 0%, rgba(43, 38, 31, 0.80) 55%, rgba(194, 155, 56, 0.28) 100%);
}

/* --------------------------------------------------------------------------
   BACKGROUND MODES — surfaces, contrast, shadows
   -------------------------------------------------------------------------- */

[data-background="night"] {
    --bg-main: #03070c;
    --bg-section: #07111c;
    --bg-card: #0c1622;
    --bg-card-hover: #122033;
    --bg-navbar: rgba(3, 7, 12, 0.94);
    --bg-footer: #030609;
    --bg-topbar: #020508;
    --text-main: #f4f7fb;
    --text-secondary: #94a3b8;
    --text-muted: #7b8899;
    --text-heading: #ffffff;
    --text-topbar: #c5d0dc;
    --nav-link-color: #e8eef6;
    --border-color: rgba(148, 163, 184, 0.14);
    --shadow-color: rgba(0, 0, 0, 0.6);
    --overlay: rgba(3, 7, 12, 0.62);
    --input-bg: #0c1622;
    --input-text: #f4f7fb;
    --input-border: rgba(148, 163, 184, 0.22);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.58);
    --dropdown-bg: #0c1622;
    --dropdown-text: #f4f7fb;
    --dropdown-hover: rgba(255, 255, 255, 0.06);
    --pattern-opacity: 0.28;
}

[data-background="dark"] {
    --bg-main: #0b1118;
    --bg-section: #111923;
    --bg-card: #121c28;
    --bg-card-hover: #182433;
    --bg-navbar: rgba(11, 17, 24, 0.96);
    --bg-footer: #07111f;
    --bg-topbar: #0a1016;
    --text-main: #eef3f8;
    --text-secondary: #9aa8b8;
    --text-muted: #8090a2;
    --text-heading: #ffffff;
    --text-topbar: #c9d4e0;
    --nav-link-color: #e8eef6;
    --border-color: rgba(148, 163, 184, 0.16);
    --shadow-color: rgba(0, 0, 0, 0.48);
    --overlay: rgba(11, 17, 24, 0.55);
    --input-bg: #121c28;
    --input-text: #eef3f8;
    --input-border: rgba(148, 163, 184, 0.24);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.36);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.48);
    --dropdown-bg: #121c28;
    --dropdown-text: #eef3f8;
    --dropdown-hover: rgba(255, 255, 255, 0.07);
    --pattern-opacity: 0.18;
}

[data-background="light"] {
    --bg-main: #ffffff;
    --bg-section: #f5f7fa;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --bg-navbar: #ffffff;
    --bg-footer: #07111f;
    --bg-topbar: #f3f6f9;
    --text-main: #1a1f26;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-heading: #101820;
    --text-topbar: #334155;
    --nav-link-color: #1a1f26;
    --border-color: #dce3ea;
    --shadow-color: rgba(16, 24, 32, 0.08);
    --overlay: rgba(255, 255, 255, 0.15);
    --input-bg: #ffffff;
    --input-text: #111827;
    --input-border: #dce3ea;
    --shadow-sm: 0 2px 8px rgba(16, 24, 32, 0.06);
    --shadow-md: 0 8px 22px rgba(16, 24, 32, 0.08);
    --shadow-lg: 0 16px 36px rgba(16, 24, 32, 0.12);
    --dropdown-bg: #ffffff;
    --dropdown-text: #101820;
    --dropdown-hover: #f1f5f9;
    --pattern-opacity: 0.45;
}

[data-background="light"][data-theme="blue"] {
    --hero-overlay: linear-gradient(135deg, rgba(6, 14, 28, 0.88) 0%, rgba(8, 28, 58, 0.72) 55%, rgba(13, 110, 253, 0.26) 100%);
}
[data-background="light"][data-theme="green"] {
    --hero-overlay: linear-gradient(135deg, rgba(10, 20, 12, 0.88) 0%, rgba(16, 38, 21, 0.74) 55%, rgba(47, 125, 50, 0.28) 100%);
}
[data-background="light"]
[data-background="light"]
[data-background="light"]
[data-background="light"][data-theme="red"] {
    --primary: #dc3545;
    --primary-hover: #bb2d3b;
    --secondary: #3a0a10;
    --accent: #ff4d5d;
    --accent-light: #ff7b87;
    --icon-color: #ff4d5d;
    --button-text: #ffffff;
    --hero-overlay: linear-gradient(135deg, rgba(18, 5, 8, 0.93) 0%, rgba(58, 10, 16, 0.80) 55%, rgba(220, 53, 69, 0.32) 100%);
}

[data-theme="khaki"] {
    --hero-overlay: linear-gradient(135deg, rgba(22, 18, 12, 0.88) 0%, rgba(43, 38, 31, 0.74) 55%, rgba(194, 155, 56, 0.24) 100%);
}

.site-footer {
    --text-heading: #ffffff;
    --text-main: #e8eef6;
    --text-secondary: #9aa8b8;
    --text-muted: #7d8b9c;
}

html {
    --primary-color: var(--primary);
    --accent-color: var(--accent);
    --text-primary: var(--text-heading);
    --bg-surface: var(--bg-section);
}