/* Light Mode - Default */
:root {
    --bg-primary: #ffffff;
    --bg-gradient: linear-gradient(135deg, rgba(54, 53, 71, 1) 0%, rgba(6, 77, 148, 1) 35%, rgba(19, 90, 161, 1) 100%);
    --bg-form: #ffffff;
    --text-primary: #333333;
    --text-secondary: #666666;
    --border-color: #e2e2e2;
    --input-bg: #ffffff;
    --input-text: #000000;
    --input-border: #cccccc;
    --header-bg: #f8f9fa;
    --header-hover: #e8e8f0;
    --accent-color: #0047AB;
    --accent-hover: #040a6f;
    --formatted-amount: #5490d1;
    --error-color: #d9534f;
    --box-shadow: 0 0 0 2px #e2e2e2, 0 4px 15px rgba(0, 0, 0, 0.1), 0 10px 30px rgba(0, 0, 0, 0.08);
    --currency-symbol: #333333;
}

/* Apply light mode variables to elements */
body {
    background: var(--bg-gradient);
    color: var(--text-primary);
}

.form-container {
    background-color: var(--bg-form);
    box-shadow: var(--box-shadow);
}

.form-container::before {
    background-color: var(--border-color);
}

h1, h2, h3 {
    color: var(--text-primary);
}

p, li, td, th, label, span {
    color: var(--text-primary);
}

.section-header {
    background-color: var(--header-bg);
}

.section-header:hover {
    background-color: var(--header-hover);
}

input[type='text'],
input[type='number'],
input[type='email'],
input[type='tel'],
input[type='password'],
select {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
}

.currency-group .currency-symbol {
    color: var(--currency-symbol);
}

.formatted-amount {
    color: var(--formatted-amount);
}

.error-message {
    color: var(--error-color);
}

.footer {
    color: var(--text-secondary);
}

/* Dark Mode - Manual (class-based toggle) - body.dark-mode */
body.dark-mode {
    --bg-primary: #0d1b2a;
    --bg-gradient: linear-gradient(135deg, #0d1b2a 0%, #1b263b 50%, #243b55 100%);
    --bg-form: #1e1e1e;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --border-color: #333333;
    --input-bg: #2d2d2d;
    --input-text: #ffffff;
    --input-border: #444444;
    --header-bg: #2d2d2d;
    --header-hover: #3d3d3d;
    --accent-color: #4a90d9;
    --accent-hover: #5ba0e9;
    --formatted-amount: #66b0ff;
    --error-color: #ff6b6b;
    --box-shadow: 0 0 0 2px #333333, 0 10px 30px rgba(0, 0, 0, 0.5), 0 20px 60px rgba(0, 0, 0, 0.4);
    --currency-symbol: #ffffff;
}

/* Note: Removed @media (prefers-color-scheme: dark) to prevent automatic 
   dark mode. Use body.dark-mode class for explicit dark mode control. 
   The core.js handles adding dark-mode class based on user preference or 
   localStorage setting. */