/* Global Styles - BM Dashboard */

/* Import Design System */
@import url('css/design-tokens.css');
@import url('css/components.css');
@import url('css/accessibility.css');

/* ========== CSS Reset & Base Styles ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    min-height: 100vh;
    padding: var(--space-5);
    transition: background var(--transition-base);
    color: var(--text-primary);
    line-height: var(--line-height-normal);
}

/* ========== Container ========== */
.container {
    max-width: 1400px;
    margin: 0 auto;
}

/* ========== Typography ========== */
h1 {
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
}

h2 {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

h3 {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

.subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-bottom: var(--space-10);
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
    body {
        padding: var(--space-3);
    }

    header {
        padding: var(--space-5);
    }
}


/* ========== Dark Mode Toggle ========== */
.dark-mode-toggle {
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(102, 126, 234, 0.1);
    border: 2px solid #667eea;
}

.dark-mode-toggle:hover {
    background: #667eea;
    transform: scale(1.1);
}