/**
 * Dark/Light Mode Styles
 */

/* Light Mode (Default) */
body.light-mode {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
    color: #212529;
}

body.light-mode::before {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(0,0,0,0.03)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
}

body.light-mode .header {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-mode .logo {
    background: linear-gradient(45deg, #ff6b6b, #ffd93d, #6bcf7f, #4d9de0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.light-mode .main-navigation a {
    color: #212529;
}

body.light-mode .main-navigation a:hover {
    color: #ff6b6b;
}

body.light-mode .hero h1 {
    color: #212529;
    background: linear-gradient(45deg, #212529, #343a40, #495057);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

body.light-mode .hero p {
    color: #495057;
    text-shadow: none;
}

body.light-mode .card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-mode .card h3 {
    color: #212529;
}

body.light-mode .card p {
    color: #495057;
}

body.light-mode .cta-section {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-mode .cta-section h2 {
    color: #212529;
}

body.light-mode .cta-section p {
    color: #495057;
}

body.light-mode .modal-content {
    background: rgba(255, 255, 255, 0.95);
}

body.light-mode .form-group label {
    color: #212529;
}

body.light-mode .form-group input {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(0, 0, 0, 0.1);
}

body.light-mode .investment-single {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-mode .investment-single .entry-title,
body.light-mode .investment-single h3,
body.light-mode .detail-value {
    color: #212529;
}

body.light-mode .entry-content {
    color: #495057;
}

body.light-mode .detail-label {
    color: #6c757d;
}

/* Dark Mode (Original Theme) */
body.dark-mode {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #e9ecef;
}

body.dark-mode::before {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
}

/* Mode Toggle Button */
.mode-toggle {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    margin-left: 15px;
    transition: all 0.3s ease;
}

.mode-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mode-toggle i {
    font-size: 1.2rem;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* Transition Effects */
body, .header, .card, .cta-section, .modal-content, .form-group input,
.hero h1, .hero p, .card h3, .card p, .cta-section h2, .cta-section p,
.main-navigation a, .investment-single, .entry-content, .detail-value, .detail-label {
    transition: all 0.3s ease;
}