/* CSS Variables - Theme settings for Benchable */

:root {
    /* Colors - Updated with modern palette */
    --primary-color: #4361ee;
    --primary-color-rgb: 67, 97, 238;
    --secondary-color: #6c757d;
    --secondary-color-rgb: 108, 117, 125;
    --success-color: #06d6a0;
    --success-color-rgb: 6, 214, 160;
    --danger-color: #ef476f;
    --danger-color-rgb: 239, 71, 111;
    --warning-color: #ffd166;
    --warning-color-rgb: 255, 209, 102;
    --info-color: #48cae4;
    --info-color-rgb: 72, 202, 228;
    --light-color: #f8f9fa;
    --light-color-rgb: 248, 249, 250;
    --dark-color: #212529;
    --dark-color-rgb: 33, 37, 41;

    /* Text and Background Contrasts */
    --text-on-primary: #ffffff;
    --text-on-secondary: #ffffff;
    --text-on-success: #ffffff;
    --text-on-danger: #ffffff;
    --text-on-warning: #000000;
    --text-on-info: #000000;
    --text-on-light: var(--dark-color);
    --text-on-dark: var(--light-color);
    --text-muted: #6c757d;
    --text-subtle: #555;
    --text-lighter: #666;

    /* Typography - Updated with modern fonts */
    --body-font: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --heading-font: 'Poppins', var(--body-font);
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.25rem;
    --font-weight-normal: 400;
    --font-weight-bold: 600;
    --line-height-base: 1.6;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 3rem;

    /* Border Radius - More modern rounded corners */
    --border-radius-sm: 0.375rem;
    --border-radius: 0.625rem;
    --border-radius-lg: 0.875rem;

    /* Shadows - Enhanced for depth */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

    /* Card-specific */
    --card-bg: #ffffff;
    --card-border: none;
    --card-shadow: var(--shadow);
    --card-border-radius: var(--border-radius);
    
    /* Component colors */
    --badge-group-bg: #7209b7;
    --badge-group-bg-rgb: 114, 9, 183;
    --badge-author-bg: #f72585;
    --badge-author-bg-rgb: 247, 37, 133;
    --badge-modality-bg: #3a86ff;
    --badge-modality-bg-rgb: 58, 134, 255;
    --badge-modality-output-bg: #8e44ad;
    --badge-modality-output-bg-rgb: 142, 68, 173;
    
    /* Price Badge Tiers */
    --price-badge-0-bg: #6c757d; /* Grey (Free) */
    --price-badge-0-text: #ffffff;
    --price-badge-1-bg: #28a745; /* Green ($) */
    --price-badge-1-text: #ffffff;
    --price-badge-2-bg: #17a2b8; /* Teal ($$) */
    --price-badge-2-text: #ffffff;
    --price-badge-3-bg: #ffc107; /* Yellow ($$$) */
    --price-badge-3-text: #333333;
    --price-badge-4-bg: #fd7e14; /* Orange ($$$$) */
    --price-badge-4-text: #ffffff;
    --price-badge-5-bg: #dc3545; /* Red ($$$$$) */
    --price-badge-5-text: #ffffff;
    --price-badge-unknown-bg: #adb5bd; /* Lighter grey (Unknown) */
    --price-badge-unknown-text: #495057;

    --file-badge-bg: var(--light-color);

    /* General Border Color */
    --border-color: #dee2e6;

    /* Header/Navbar Background */
    --header-bg: #ffffff;

    /* Subtle Background (e.g., for hover, active states) */
    --subtle-bg-color: #e9ecef;
    --subtle-bg-hover: #dee2e6;

    /* Card Specific Backgrounds */
    --card-header-bg: rgba(var(--primary-color-rgb), 0.03);
    --card-footer-bg: rgba(var(--light-color-rgb), 0.5);

    /* Input Group Text Background */
    --input-group-text-bg: #e9ecef;

    /* Form Input Background (light theme) */
    --input-bg: #ffffff;

    /* Button Specific Defaults (matching Bootstrap defaults) */
    --button-light-bg: #f8f9fa;
    --button-light-text: #212529;
    --button-light-border: #f8f9fa;
    --button-secondary-bg: #6c757d;
    --button-secondary-text: #ffffff;
    --button-secondary-border: #6c757d;
    
    /* Close Button Background */
    --btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");

    /* Alert Specific */
    --alert-warning-text: #d97706; /* Amber-600 chosen for contrast */

    /* Favourite Toggle Specific */
    --warning-light-color: rgba(var(--warning-color-rgb), 0.1);
    --warning-dark-color: #b38f00;

    /* Table Specific Variables */
    --table-bg: transparent; /* Default to transparent background */
    --table-color: var(--dark-color);
    --table-border-color: var(--border-color);
    --table-striped-bg: rgba(0, 0, 0, 0.03); /* Lighter stripe */
    --table-hover-bg: rgba(0, 0, 0, 0.06);  /* Lighter hover */
    --table-header-bg: var(--light-color); /* Header distinct from rows */
    --table-header-color: var(--dark-color);
    --table-accent-bg: transparent; /* Default table accent background */
    --table-striped-color: var(--dark-color); /* Text color on striped rows */
    --table-active-bg: transparent; /* Default table active background */
    --table-active-color: var(--dark-color); /* Text color on active rows */
    --table-hover-color: var(--dark-color); /* Text color on hover */

    /* Breakpoints */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;

    /* Bootstrap Variable Defaults (ensure alignment) */
    --bs-body-color: var(--dark-color);
    --bs-body-bg: #ffffff;
    --bs-border-color: var(--border-color);
    --bs-border-width: 1px; /* Example */
    --bs-border-radius: var(--border-radius);
    --bs-secondary-color: var(--secondary-color);
    --bs-emphasis-color: var(--dark-color); 
    --bs-tertiary-bg: #f8f9fa; /* Example */
    --bs-secondary-bg: #e9ecef; /* Example */

    /* List group specific - map to our variables */
    --bs-list-group-color: var(--text-color); 
    --bs-list-group-bg: var(--card-bg); /* Use card-bg for list items */
    --bs-list-group-border-color: var(--border-color);
    --bs-list-group-border-width: var(--bs-border-width);
    --bs-list-group-border-radius: var(--border-radius);
    --bs-list-group-action-color: var(--secondary-color); /* Example mapping */
    --bs-list-group-action-hover-color: var(--primary-color); /* Example mapping */
    --bs-list-group-action-hover-bg: var(--subtle-bg-hover); /* Use our hover */
    --bs-list-group-action-active-color: var(--text-on-primary); /* Example */
    --bs-list-group-action-active-bg: var(--primary-color); /* Example */
    --bs-list-group-active-color: var(--text-on-primary); /* Match Bootstrap default? */
    --bs-list-group-active-bg: var(--primary-color); /* Match Bootstrap default? */
    --bs-list-group-active-border-color: var(--primary-color);

    --modal-bg: #fff;

    --form-switch-bg: var(--subtle-bg-color);

    /* Tour Specific Backgrounds */
    --tour-footer-bg: #f1f3f4;
}

/* Dark Theme Variables - Applied when .dark-theme or .auto-dark-theme class is present on :root */
:root.dark-theme, :root.auto-dark-theme {
    --primary-color: #4cc9f0;
    --primary-color-rgb: 76, 201, 240;
    --secondary-color: #8c959f;
    --secondary-color-rgb: 140, 149, 159;
    --success-color: #2ecc71;
    --success-color-rgb: 46, 204, 113;
    --danger-color: #ff5e78;
    --danger-color-rgb: 255, 94, 120;
    --warning-color: #fce38a;
    --warning-color-rgb: 252, 227, 138;
    --info-color: #56cfe1;
    --info-color-rgb: 86, 207, 225;
    --card-bg: #2d3748;
    --card-bg-rgb: 45, 55, 72;
    --light-color: #e2e8f0;
    --light-color-rgb: 226, 232, 240;
    --dark-color: #1a202c;
    --dark-color-rgb: 26, 32, 44;
    --text-color: var(--light-color);
    --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4);
    
    /* Adjusted text colors for dark theme */
    --text-muted: #b0b5bd;
    --text-subtle: #e2e8f0;
    --text-lighter: #cbd5e0;

    /* Ensure input text and backgrounds are properly visible in dark mode */
    --input-bg: #374151;
    --input-color: var(--light-color);
    --input-border-color: rgba(var(--light-color-rgb), 0.2);
    --input-placeholder-color: #9ca3af;

    /* Dark Theme Price Badges (adjust if needed, using same for now) */
    --price-badge-0-bg: #6c757d;
    --price-badge-0-text: #ffffff;
    --price-badge-1-bg: #28a745;
    --price-badge-1-text: #ffffff;
    --price-badge-2-bg: #17a2b8;
    --price-badge-2-text: #ffffff;
    --price-badge-3-bg: #ffc107;
    --price-badge-3-text: #333333;
    --price-badge-4-bg: #fd7e14;
    --price-badge-4-text: #ffffff;
    --price-badge-5-bg: #dc3545;
    --price-badge-5-text: #ffffff;
    --price-badge-unknown-bg: #adb5bd;
    --price-badge-unknown-text: #495057;

    --file-badge-bg: var(--dark-color);

    /* General Border Color */
    --border-color: rgba(var(--light-color-rgb), 0.25);

    /* Header/Navbar Background */
    --header-bg: var(--dark-color);

    /* Subtle Background (e.g., for hover, active states) */
    --subtle-bg-color: rgba(var(--light-color-rgb), 0.1);
    --subtle-bg-hover: rgba(var(--primary-color-rgb), 0.2);

    /* Card Specific Backgrounds */
    --card-header-bg: rgba(var(--dark-color-rgb), 0.5);
    --card-footer-bg: rgba(var(--dark-color-rgb), 0.3);

    /* Input Group Text Background */
    --input-group-text-bg: rgba(var(--light-color-rgb), 0.1);

    /* Button Specific Overrides for Dark Theme */
    --button-light-bg: var(--secondary-color);
    --button-light-text: var(--text-on-secondary);
    --button-light-border: var(--secondary-color);
    --button-secondary-bg: var(--card-bg);
    --button-secondary-text: var(--light-color);
    --button-secondary-border: var(--border-color);
    
    /* Close Button Background for Dark Theme */
    --btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    
    /* Alert Specific */
    --alert-warning-text: var(--warning-color);

    /* Table Specific Variable Overrides for Dark Theme */
    --table-bg: var(--card-bg);
    --table-color: var(--light-color);
    --table-border-color: rgba(var(--light-color-rgb), 0.15);
    --table-striped-bg: rgba(var(--dark-color-rgb), 0.1);
    --table-hover-bg: rgba(var(--light-color-rgb), 0.1);
    --table-header-bg: rgba(var(--dark-color-rgb), 0.7);
    --table-header-color: var(--light-color);
    --table-accent-bg: rgba(var(--light-color-rgb), 0.03);
    --table-striped-color: var(--light-color);
    --table-active-bg: rgba(var(--light-color-rgb), 0.12);
    --table-active-color: var(--light-color);
    --table-hover-color: var(--light-color);

    /* Bootstrap Variable Defaults (ensure alignment) */
    --bs-body-color: var(--light-color);
    --bs-body-bg: var(--dark-color);
    --bs-border-color: var(--border-color);
    --bs-secondary-color: var(--secondary-color);
    --bs-emphasis-color: var(--light-color);
    --bs-tertiary-bg: rgba(var(--dark-color-rgb), 0.5);
    --bs-secondary-bg: rgba(var(--dark-color-rgb), 0.3);
    
    /* List group specific dark overrides */
    --bs-list-group-color: var(--text-color);
    --bs-list-group-bg: var(--card-bg);
    --bs-list-group-border-color: var(--border-color);
    --bs-list-group-action-color: var(--secondary-color);
    --bs-list-group-action-hover-color: var(--primary-color);
    --bs-list-group-action-hover-bg: var(--subtle-bg-hover);
    --bs-list-group-action-active-color: var(--text-on-primary);
    --bs-list-group-action-active-bg: var(--primary-color);
    --bs-list-group-disabled-color: var(--secondary-color);
    --bs-list-group-disabled-bg: var(--bs-body-bg);
    --bs-list-group-active-color: var(--text-on-primary);
    --bs-list-group-active-bg: var(--primary-color);
    --bs-list-group-active-border-color: var(--primary-color);

    --modal-bg: #2d3748;
    
    /* Tour Specific Backgrounds */
    --tour-footer-bg: #1e2a3a;
}