/* ============================================================
    CSS CUSTOM PROPERTIES — DARK MODE (default)
============================================================ */
:root {
    --bg-base:        #0a1628;
    --bg-secondary:   #0f2040;
    --bg-tertiary:    #152b55;
    --text-primary:   #e8e8e8;
    --text-secondary: #9ca3af;
    --text-muted:     #6b7280;
    --card-bg:        rgba(255,255,255,.04);
    --card-border:    rgba(255,255,255,.08);
    --card-border-h:  rgba(201,168,76,.4);
    --nav-scrolled:   rgba(10,22,40,.97);
    --mobile-menu-bg: rgba(10,22,40,.97);
    --footer-bg:      #080f1e;
    --footer-bg2:     #060c18;
    --input-bg:       rgba(255,255,255,.05);
    --input-border:   rgba(255,255,255,.12);
    --input-ph:       rgba(255,255,255,.3);
    --hero-grad1:     #0a1628;
    --hero-grad2:     #0f2040;
    --stat-strip-bg1: rgba(201,168,76,.12);
    --stat-strip-bg2: rgba(46,125,94,.1);
    --scrollbar-track:#0a1628;
    --table-row:      rgba(255,255,255,.02);
    --divider:        rgba(255,255,255,.05);
}

/* ============================================================
    CSS CUSTOM PROPERTIES — LIGHT MODE
============================================================ */
html.light {
    --bg-base:        #f5f3ee;
    --bg-secondary:   #ede9e0;
    --bg-tertiary:    #e4dfd3;
    --text-primary:   #1a1a2e;
    --text-secondary: #4a4a6a;
    --text-muted:     #8888aa;
    --card-bg:        rgba(255,255,255,.75);
    --card-border:    rgba(160,124,42,.18);
    --card-border-h:  rgba(160,124,42,.6);
    --nav-scrolled:   rgba(245,243,238,.97);
    --mobile-menu-bg: rgba(245,243,238,.97);
    --footer-bg:      #1a1a2e;
    --footer-bg2:     #12122a;
    --input-bg:       rgba(255,255,255,.8);
    --input-border:   rgba(160,124,42,.3);
    --input-ph:       rgba(100,100,130,.5);
    --hero-grad1:     #e8e3d8;
    --hero-grad2:     #ddd7c9;
    --stat-strip-bg1: rgba(160,124,42,.1);
    --stat-strip-bg2: rgba(46,125,94,.08);
    --scrollbar-track:#e8e3d8;
    --table-row:      rgba(0,0,0,.02);
    --divider:        rgba(0,0,0,.06);
}

/* ============================================================
    GLOBAL RESET & BASE
============================================================ */
*, *::before, *::after { scroll-behavior: smooth; box-sizing: border-box; }
body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg-base);
    color: var(--text-primary);
    transition: background .4s ease, color .4s ease;
}
h1,h2,h3,h4 { font-family: 'Playfair Display', serif; }

/* ============================================================
    THEME TOGGLE BUTTON
============================================================ */
#themeToggle {
    position: relative;
    width: 52px; height: 28px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1a3060, #0f2040);
    border: 1.5px solid rgba(201, 76, 184, 0.4);
    cursor: pointer;
    transition: background .4s, border-color .4s;
    flex-shrink: 0;
}
html.light #themeToggle {
    background: linear-gradient(135deg, #e87ad0, #c94cae);
    border-color: rgba(160, 42, 140, 0.6);
}
#themeToggle .knob {
    position: absolute;
    top: 3px; left: 3px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #c94cb8;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .4s;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
}
html.light #themeToggle .knob {
    transform: translateX(24px);
    background: #fff;
}
#themeToggle .icon-moon { display: inline; }
#themeToggle .icon-sun  { display: none;   }
html.light #themeToggle .icon-moon { display: none;   }
html.light #themeToggle .icon-sun  { display: inline; }

/* ============================================================
    NAVBAR
============================================================ */
#navbar { transition: all .4s ease; }
#navbar.scrolled {
    background: var(--nav-scrolled) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,.18);
}
.nav-link { position: relative; color: var(--text-secondary); transition: color .3s; }
.nav-link::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:2px; background:#c94cb4; transition: width .3s; }
.nav-link:hover::after, .nav-link.active::after { width:100%; }
.nav-link:hover, .nav-link.active { color:#c94cb8; }

/* Logo text adapts */
.logo-name { color: var(--text-primary); transition: color .4s; }

/* ============================================================
    HERO
============================================================ */
.hero-bg {
    background:
    radial-gradient(ellipse at 70% 50%, rgba(201,168,76,.12) 0%, transparent 60%),
    radial-gradient(ellipse at 10% 80%, rgba(46,125,94,.1) 0%, transparent 50%),
    linear-gradient(135deg, var(--hero-grad1) 0%, var(--hero-grad2) 50%, var(--hero-grad1) 100%);
    transition: background .4s;
}
html.light .hero-bg {
    background:
    radial-gradient(ellipse at 70% 50%, rgba(201,168,76,.18) 0%, transparent 60%),
    radial-gradient(ellipse at 10% 80%, rgba(46,125,94,.12) 0%, transparent 50%),
    linear-gradient(135deg, #e8e3d8 0%, #ddd7c9 50%, #e8e3d8 100%);
}
.hero-badge {
    background: linear-gradient(90deg, rgba(201,168,76,.2), rgba(201,168,76,.05));
    border: 1px solid rgba(201, 76, 174, 0.4);
}
.hero-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(12px);
    transition: background .4s, border-color .4s;
}
html.light .hero-card {
    background: rgba(255,255,255,.7);
    border-color: rgba(160,124,42,.25);
    box-shadow: 0 8px 32px rgba(160,124,42,.1);
}
.gold-gradient { background: linear-gradient(135deg, #c94cb4, #e87ad6, #a02a90); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Hero heading adapts */
.hero-title { color: var(--text-primary); transition: color .4s; }

/* ============================================================
    SECTION TAG & UTILITY
============================================================ */
.section-tag { color: #c94ca3; letter-spacing:.2em; font-size:.75rem; font-weight:600; text-transform:uppercase; }
.card-hover { transition: transform .3s, box-shadow .3s; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,.18); }

/* ============================================================
    STAT STRIP
============================================================ */
.stat-strip {
    background: linear-gradient(90deg, var(--stat-strip-bg1), var(--stat-strip-bg2), var(--stat-strip-bg1));
    border-top: 1px solid rgba(201,168,76,.2);
    border-bottom: 1px solid rgba(201,168,76,.2);
    transition: background .4s;
}

/* ============================================================
    GLASS CARDS
============================================================ */
.glass-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: border-color .3s, transform .3s, background .4s, box-shadow .3s;
}
.glass-card:hover {
    border-color: var(--card-border-h);
    transform: translateY(-4px);
}
html.light .glass-card {
    background: rgba(255,255,255,.8);
    box-shadow: 0 2px 16px rgba(160,124,42,.07);
}
html.light .glass-card:hover {
    box-shadow: 0 8px 32px rgba(160,124,42,.15);
}

/* ============================================================
    MOBILE MENU
============================================================ */
#mobileMenu {
    transition: max-height .4s ease, opacity .4s ease;
    max-height:0; opacity:0; overflow:hidden;
    background: var(--mobile-menu-bg);
    border: 1px solid var(--card-border);
}
#mobileMenu.open { max-height: 600px; opacity:1; }
.mobile-nav-link { color: var(--text-secondary); }
.mobile-nav-link:hover { color: #c94caa; background: var(--card-bg); }

/* ============================================================
    SCROLLBAR
============================================================ */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background:#c94cae; border-radius:3px; }

/* ============================================================
    PAGE SECTIONS
============================================================ */
.page { display:none; }
.page.active { display:block; }

/* ============================================================
    BUTTONS
============================================================ */
.btn-gold { background: linear-gradient(135deg, #c94cb4, #a02a8c); color:#fff; font-weight:600; transition: all .3s; box-shadow: 0 4px 20px rgba(201,168,76,.3); }
.btn-gold:hover { box-shadow: 0 8px 30px rgba(201, 76, 191, 0.5); transform: translateY(-2px); }
.btn-outline { border: 1.5px solid rgba(201, 76, 174, 0.5); color: #c94cb4; transition: all .3s; }
.btn-outline:hover { background: rgba(201, 76, 184, 0.1); border-color:#c94ca3; }

/* ============================================================
    FORM INPUTS
============================================================ */
.form-input {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
    transition: border-color .3s, background .4s, color .4s;
}
.form-input:focus { outline:none; border-color:#c94caa; box-shadow: 0 0 0 3px rgba(201,168,76,.15); }
.form-input::placeholder { color: var(--input-ph); }
.form-input option { background: var(--bg-base); color: var(--text-primary); }

/* ============================================================
    PROGRESS BAR
============================================================ */
.prog-bar { height:6px; background: var(--card-border); border-radius:3px; overflow:hidden; }
.prog-fill { height:100%; border-radius:3px; background: linear-gradient(90deg, #c94cb8, #2e7d5e); transition: width 1.2s ease; }

/* ============================================================
    FOOTER
============================================================ */
footer {
    background: linear-gradient(180deg, var(--footer-bg) 0%, var(--footer-bg2) 100%);
    border-top: 1px solid rgba(201,168,76,.15);
    transition: background .4s;
}
/* Footer text always stays light since bg is always dark */
footer .footer-text { color: #6b7280; }
footer .footer-text:hover { color: #c94cc3; }

/* ============================================================
    MISC
============================================================ */
.heading-underline { position: relative; display:inline-block; }
.heading-underline::after { content:''; position:absolute; bottom:-8px; left:0; width:60px; height:3px; background: linear-gradient(90deg, #c54cc9, transparent); }
.timeline-line { position:absolute; left:50%; top:0; bottom:0; width:2px; background: linear-gradient(to bottom, transparent, #c94cb4, transparent); transform:translateX(-50%); }
.blog-img { background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary)); }

/* ============================================================
    LIGHT MODE OVERRIDES — text colours
============================================================ */
html.light .text-white  { color: #1a1a2e !important; }
html.light .text-gray-400 { color: #555577 !important; }
html.light .text-gray-500 { color: #777799 !important; }
html.light .text-gray-600 { color: #999999 !important; }
html.light .text-gray-300 { color: #444466 !important; }
html.light .text-gray-200 { color: #333355 !important; }
html.light .border-white\/5  { border-color: rgba(0,0,0,.06) !important; }
html.light .border-white\/10 { border-color: rgba(0,0,0,.1)  !important; }
html.light .w-px.bg-white\/10 { background: rgba(0,0,0,.12) !important; }

/* Light mode page header banners */
html.light .hero-bg { }
html.light .page-header-banner {
    background:
    radial-gradient(ellipse at 70% 50%, rgba(201,168,76,.15) 0%, transparent 60%),
    radial-gradient(ellipse at 10% 80%, rgba(46,125,94,.1) 0%, transparent 50%),
    linear-gradient(135deg, #ddd7c9 0%, #ccc6b8 50%, #ddd7c9 100%) !important;
}

/* Light: blog thumbnail overlays */
html.light .blog-thumb { filter: brightness(1.1) saturate(.8); }

/* Light: table rows */
html.light table tbody tr { background: var(--table-row); }
html.light table thead { border-color: var(--divider) !important; }

/* ============================================================
    THEME TRANSITION — smooth global
============================================================ */
body, #navbar, .glass-card, .hero-card, .hero-bg,
.stat-strip, footer, #mobileMenu, .form-input {
    transition: background .35s ease, color .35s ease, border-color .35s ease;
}

/* ============================================================
    ANIMATIONS
============================================================ */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.float-anim { animation: float 5s ease-in-out infinite; }
@keyframes pulse-glow { 0%,100% { opacity:.4; } 50% { opacity:.8; } }
.glow-pulse { animation: pulse-glow 3s ease-in-out infinite; }

/* Theme toggle tooltip */
#themeToggle::before {
    content: attr(data-tip);
    position: absolute;
    bottom: -28px; left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
#themeToggle:hover::before { opacity: 1; }