/* =========================================================
   1. ROOT VARIABLES — DARK THEME (DEFAULT)
   ========================================================= */
:root {
    /* Backgrounds */
    --bg: #0d0d0d;
    --bg-alt: #111;
    --bg-card: #161616;
    --bg-hover: #1a1a1a;

    /* Text */
    --text: #e6e6e6;
    --text-muted: #a8a8a8;
    --text-faint: #555553;

    /* Accent */
    --accent: #4da3ff;
    --accent-hover: #6db8ff;

    /* Status */
    --warning: #f5a623;
    --danger: #ff5a5a;
    --success: #4caf72;

    /* Borders */
    --border: rgba(255, 255, 255, 0.07);

    /* Layout */
    --container: 1200px;

    /* Animation */
    --anim-fast: 0.15s;
    --anim-med: 0.3s;
    --anim-slow: 0.6s;
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 9999px;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
}

/* =========================================================
   1B. LIGHT THEME OVERRIDES
   ========================================================= */
body.light-mode {
    --bg: #f7f7f7;
    --bg-alt: #ffffff;
    --bg-card: #f0f0f0;
    --bg-hover: #e8e8e8;

    --text: #1a1a1a;
    --text-muted: #555;
    --text-faint: #aaaaaa;

    --accent: #0078ff;
    --accent-hover: #3391ff;

    --border: rgba(0, 0, 0, 0.08);

    /* Header / nav overrides */
    --header-bg:        #ffffff;
    --header-border:    rgba(0, 0, 0, 0.08);
    --nav-hover-bg:     rgba(0, 0, 0, 0.05);
    --dropdown-bg:      #ffffff;
    --dropdown-border:  rgba(0, 0, 0, 0.1);
    --dropdown-shadow:  0 8px 32px rgba(0, 0, 0, 0.12);
}

/* =========================================================
   2. GLOBAL ELEMENTS
   ========================================================= */

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* Smooth theme transitions */
body,
.site-header,
.site-footer,
.analysis-card,
.feature-box {
    transition:
        background var(--anim-med) var(--ease-smooth),
        color var(--anim-med) var(--ease-smooth),
        border-color var(--anim-med) var(--ease-smooth);
}

/* Links */
a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--anim-fast) var(--ease-smooth);
}

a:hover {
    color: var(--accent-hover);
}

/* =========================================================
   LIGHT MODE — HARDCODED COLOR OVERRIDES
   ========================================================= */
body.light-mode .ewi-tools-hero__title,
body.light-mode .ewi-tools-hero__sub,
body.light-mode .ewi-tools-hero__panel-title,
body.light-mode .ewi-tools-hero__panel-sub,
body.light-mode .ewi-tool-card__title,
body.light-mode .ewi-tool-card__desc,
body.light-mode .ewi-section__title,
body.light-mode .ewi-section__lead,
body.light-mode .ewi-kpi strong,
body.light-mode .ewi-kpi span,
body.light-mode .ewi-tool-card,
body.light-mode h1, body.light-mode h2, body.light-mode h3,
body.light-mode p {
    color: var(--text);
}

body.light-mode .ewi-tool-card {
    background: var(--bg-alt);
    border-color: var(--border);
}

body.light-mode .ewi-tools-hero__panel {
    background: var(--bg-alt);
    border-color: var(--border);
}

body.light-mode .site-header {
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
}

body.light-mode .site-footer {
    background: var(--bg-alt);
    color: var(--text);
}

body.light-mode .nav-link,
body.light-mode .main-nav a,
body.light-mode .nav-links li a,
body.light-mode .nav-links .sub-menu li a {
    color: var(--text-muted);
}

body.light-mode .nav-links li a:hover,
body.light-mode .nav-links .sub-menu li a:hover,
body.light-mode .nav-links li.current-menu-item > a,
body.light-mode .nav-links li.current-page-ancestor > a {
    color: var(--text);
}

/* Mega-menu light mode fixes */
body.light-mode .mega-menu {
    background: var(--dropdown-bg);
    border-color: var(--dropdown-border);
    box-shadow: var(--dropdown-shadow);
}
body.light-mode .mega-menu__link { color: var(--text-muted); }
body.light-mode .mega-menu__link:hover { color: var(--text); background: rgba(0,0,0,.04); }
body.light-mode .mega-menu__link strong { color: var(--text); }
body.light-mode .mega-menu__link small  { color: var(--text-muted); }

/* =========================================================
   LOGO SWAP — DARK / LIGHT MODE
   ========================================================= */
.ewi-logo--light { display: none; }
.ewi-logo--dark  { display: inline; }

body.light-mode .ewi-logo--light { display: inline; }
body.light-mode .ewi-logo--dark  { display: none; }

/* Hide theme toggle on force-dark pages */
body.force-dark-page .theme-toggle {
    display: none !important;
}
body.force-dark-page {
    --bg: #0d0d0d !important;
    --bg-alt: #111 !important;
    --text: #e6e6e6 !important;
    --text-muted: #a8a8a8 !important;
    --border: rgba(255,255,255,0.07) !important;
}

/* ── GLOBAL LIGHTBOX ─────────────────────────────── */
.ewi-lightbox{display:none;position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;background:rgba(0,0,0,.92)!important;z-index:999999!important;align-items:center!important;justify-content:center!important;cursor:zoom-out}
.ewi-lightbox.is-open{display:flex!important}
.ewi-lightbox__img{max-width:95vw!important;max-height:92vh!important;width:auto!important;height:auto!important;object-fit:contain!important;border-radius:8px;display:block!important;margin:auto!important}
.ewi-lightbox__close{position:absolute;top:16px;right:20px;color:#fff;font-size:2rem;cursor:pointer;background:none;border:none;line-height:1;opacity:.7;z-index:1000000}
.ewi-lightbox__close:hover{opacity:1}