/**
 * Gold Rates & Currency Converter - Theme Variables
 * This file contains CSS variables for consistent theming across light and dark modes
 */

:root {
    /* Light theme variables */
    --light-bg-primary: #ffffff;
    --light-bg-secondary: #f8f9fa;
    --light-bg-tertiary: #e9ecef;
    --light-bg-elevated: #f1f3f5;
    --light-bg-hover: #e2e6ea;
    --light-border-light: #dee2e6;
    --light-border-medium: #ced4da;
    --light-text-primary: #212529;
    --light-text-secondary: #495057;
    --light-text-muted: #6c757d;
    --light-gold-primary: #d4af37;
    --light-gold-secondary: #f2d05c;
    --light-gold-hover: #c9a633;
    --light-success: #28a745;
    --light-danger: #dc3545;
    --light-shadow: rgba(0, 0, 0, 0.1);
    
    /* Default to light theme */
    --bg-primary: var(--light-bg-primary);
    --bg-secondary: var(--light-bg-secondary);
    --bg-tertiary: var(--light-bg-tertiary);
    --bg-elevated: var(--light-bg-elevated);
    --bg-hover: var(--light-bg-hover);
    --border-light: var(--light-border-light);
    --border-medium: var(--light-border-medium);
    --text-primary: var(--light-text-primary);
    --text-secondary: var(--light-text-secondary);
    --text-muted: var(--light-text-muted);
    --gold-primary: var(--light-gold-primary);
    --gold-secondary: var(--light-gold-secondary);
    --gold-hover: var(--light-gold-hover);
    --success: var(--light-success);
    --danger: var(--light-danger);
    --shadow: var(--light-shadow);
}

/* Dark theme variables */
:root.dark-theme, body.dark-theme {
    --dark-bg-primary: #121212;
    --dark-bg-secondary: #1e1e1e;
    --dark-bg-tertiary: #252525;
    --dark-bg-elevated: #2a2a2a;
    --dark-bg-hover: #333333;
    --dark-border-light: #444444;
    --dark-border-medium: #555555;
    --dark-text-primary: #ffffff;
    --dark-text-secondary: #e0e0e0;
    --dark-text-muted: #b0b0b0;
    --dark-gold-primary: #f1b933;
    --dark-gold-secondary: #f8d87c;
    --dark-gold-hover: #e5a926;
    --dark-success: #4caf50;
    --dark-danger: #f44336;
    --dark-shadow: rgba(0, 0, 0, 0.3);
    
    /* Override default variables with dark theme values */
    --bg-primary: var(--dark-bg-primary);
    --bg-secondary: var(--dark-bg-secondary);
    --bg-tertiary: var(--dark-bg-tertiary);
    --bg-elevated: var(--dark-bg-elevated);
    --bg-hover: var(--dark-bg-hover);
    --border-light: var(--dark-border-light);
    --border-medium: var(--dark-border-medium);
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-muted: var(--dark-text-muted);
    --gold-primary: var(--dark-gold-primary);
    --gold-secondary: var(--dark-gold-secondary);
    --gold-hover: var(--dark-gold-hover);
    --success: var(--dark-success);
    --danger: var(--dark-danger);
    --shadow: var(--dark-shadow);
}