/* Regulatory Sandbox Application - Color Scheme Variables */

/* Comprehensive color scheme for consistent branding */



:root {

    /* Primary Brand Colors */

    --primary-color: #d3a304;

    --primary-hover: #b8910a;

    --primary-dark: #9a8103;

    --primary-light: rgba(211, 163, 4, 0.1);

    --primary-lighter: rgba(211, 163, 4, 0.05);

    

    /* Secondary Brand Colors */

    --secondary-color: #2c3e50;

    --secondary-hover: #34495e;

    --secondary-dark: #1a252f;

    --secondary-light: rgba(44, 62, 80, 0.1);

    --secondary-lighter: rgba(44, 62, 80, 0.05);

    

    /* Status Colors */

    --success-color: #28a745;

    --success-hover: #218838;

    --success-light: #d4edda;

    --success-lighter: rgba(40, 167, 69, 0.1);

    

    --danger-color: #dc3545;

    --danger-hover: #c82333;

    --danger-light: #f8d7da;

    --danger-lighter: rgba(220, 53, 69, 0.1);

    

    --warning-color: #ffc107;

    --warning-hover: #e0a800;

    --warning-light: #fff3cd;

    --warning-lighter: rgba(255, 193, 7, 0.1);

    

    --info-color: #17a2b8;

    --info-hover: #138496;

    --info-light: #d1ecf1;

    --info-lighter: rgba(23, 162, 184, 0.1);

    

    /* Text Colors */

    --text-primary: #2c3e50;

    --text-secondary: #7f8c8d;

    --text-muted: #6c757d;

    --text-light: #ecf0f1;

    --text-white: #ffffff;

    --text-dark: #212529;

    

    /* Background Colors */

    --bg-primary: #ffffff;

    --bg-secondary: #f8f9fa;

    --bg-tertiary: #e9ecef;

    --bg-dark: #2c3e50;

    --bg-light: #ecf0f1;

    --bg-brand: #d3a304;

    --bg-body: #ffffff;

    

    /* Border Colors */

    --border-color: #dee2e6;

    --border-light: #e9ecef;

    --border-dark: #adb5bd;

    --border-primary: #d3a304;

    --border-secondary: #2c3e50;

    

    /* Border Radius */

    --border-radius: 6px;

    --border-radius-sm: 4px;

    --border-radius-lg: 10px;

    --border-radius-xl: 16px;

    --border-radius-pill: 50px;

    

    /* Shadows */

    --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);

    --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

    --box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

    --box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

    

    /* Transitions */

    --transition-fast: all 0.15s ease-in-out;

    --transition: all 0.3s ease;

    --transition-slow: all 0.5s ease;

    --transition-color: color 0.15s ease-in-out;

    --transition-background: background-color 0.15s ease-in-out;

    --transition-border: border-color 0.15s ease-in-out;

    --transition-box-shadow: box-shadow 0.15s ease-in-out;

    

    /* Spacing */

    --spacing-xs: 0.25rem;

    --spacing-sm: 0.5rem;

    --spacing-md: 1rem;

    --spacing-lg: 1.5rem;

    --spacing-xl: 3rem;

    --spacing-xxl: 4.5rem;

    

    /* Font Sizes */

    --font-size-xs: 0.75rem;

    --font-size-sm: 0.875rem;

    --font-size-base: 1rem;

    --font-size-lg: 1.125rem;

    --font-size-xl: 1.25rem;

    --font-size-xxl: 1.5rem;

    

    /* Font Weights */

    --font-weight-light: 300;

    --font-weight-normal: 400;

    --font-weight-medium: 500;

    --font-weight-semibold: 600;

    --font-weight-bold: 700;

    

    /* Line Heights */

    --line-height-sm: 1.25;

    --line-height-base: 1.5;

    --line-height-lg: 1.6;

    --line-height-xl: 1.75;

    

    /* Z-Index */

    --z-index-dropdown: 1000;

    --z-index-sticky: 1020;

    --z-index-fixed: 1030;

    --z-index-modal-backdrop: 1040;

    --z-index-modal: 1050;

    --z-index-popover: 1060;

    --z-index-tooltip: 1070;

}



/* Dark Mode Support (Future Enhancement) */

@media (prefers-color-scheme: dark) {

    :root {

        --text-primary: #ecf0f1;

        --text-secondary: #bdc3c7;

        --text-muted: #95a5a6;

        --bg-primary: #2c3e50;

        --bg-secondary: #34495e;

        --bg-tertiary: #3e4651;

        --bg-body: #2c3e50;

        --border-color: #4a5568;

        --border-light: #4a5568;

        --border-dark: #6c757d;

    }

}



/* High Contrast Mode Support */

@media (prefers-contrast: high) {

    :root {

        --primary-color: #cc9900;

        --secondary-color: #1a1a1a;

        --text-primary: #000000;

        --text-secondary: #333333;

        --border-color: #666666;

        --box-shadow: 0 0 0 2px currentColor;

    }

}



/* Reduced Motion Support */

@media (prefers-reduced-motion: reduce) {

    :root {

        --transition-fast: none;

        --transition: none;

        --transition-slow: none;

        --transition-color: none;

        --transition-background: none;

        --transition-border: none;

        --transition-box-shadow: none;

    }

}



/* Utility Classes for Color Scheme */

.text-primary { color: var(--text-primary) !important; }

.text-secondary { color: var(--text-secondary) !important; }

.text-muted { color: var(--text-muted) !important; }

.text-light { color: var(--text-light) !important; }

.text-white { color: var(--text-white) !important; }

.text-dark { color: var(--text-dark) !important; }



.text-brand-primary { color: var(--primary-color) !important; }

.text-brand-secondary { color: var(--secondary-color) !important; }

.text-success { color: var(--success-color) !important; }

.text-danger { color: var(--danger-color) !important; }

.text-warning { color: var(--warning-color) !important; }

.text-info { color: var(--info-color) !important; }



.bg-primary { background-color: var(--bg-primary) !important; }

.bg-secondary { background-color: var(--bg-secondary) !important; }

.bg-tertiary { background-color: var(--bg-tertiary) !important; }

.bg-dark { background-color: var(--bg-dark) !important; }

.bg-light { background-color: var(--bg-light) !important; }

.bg-brand { background-color: var(--bg-brand) !important; }



.bg-brand-primary { background-color: var(--primary-color) !important; }

.bg-brand-secondary { background-color: var(--secondary-color) !important; }

.bg-success { background-color: var(--success-color) !important; }

.bg-danger { background-color: var(--danger-color) !important; }

.bg-warning { background-color: var(--warning-color) !important; }

.bg-info { background-color: var(--info-color) !important; }



.bg-success-light { background-color: var(--success-light) !important; }

.bg-danger-light { background-color: var(--danger-light) !important; }

.bg-warning-light { background-color: var(--warning-light) !important; }

.bg-info-light { background-color: var(--info-light) !important; }



.border-primary { border-color: var(--border-primary) !important; }

.border-secondary { border-color: var(--border-secondary) !important; }

.border-success { border-color: var(--success-color) !important; }

.border-danger { border-color: var(--danger-color) !important; }

.border-warning { border-color: var(--warning-color) !important; }

.border-info { border-color: var(--info-color) !important; }



/* Component-specific color applications */

.navbar-brand-primary { color: var(--primary-color) !important; }

.navbar-brand-secondary { color: var(--secondary-color) !important; }



.card-header-primary { 

    background-color: var(--primary-color) !important;

    color: var(--text-primary) !important;

}



.card-header-secondary { 

    background-color: var(--secondary-color) !important;

    color: var(--text-white) !important;

}



.alert-primary {

    background-color: var(--primary-light) !important;

    border-color: var(--primary-color) !important;

    color: var(--text-primary) !important;

}



.alert-secondary {

    background-color: var(--secondary-light) !important;

    border-color: var(--secondary-color) !important;

    color: var(--text-primary) !important;

}



/* Status indicators */

.status-draft { color: var(--warning-color) !important; }

.status-pending { color: var(--warning-color) !important; }

.status-awaiting { color: var(--warning-color) !important; }

.status-signed { color: var(--success-color) !important; }

.status-submitted { color: var(--info-color) !important; }

.status-approved { color: var(--success-color) !important; }

.status-rejected { color: var(--danger-color) !important; }

.status-under-review { color: var(--info-color) !important; }



/* Form elements */

.form-control:focus {

    border-color: var(--primary-color) !important;

    box-shadow: 0 0 0 0.2rem rgba(211, 163, 4, 0.25) !important;

}



.form-control.is-valid {

    border-color: var(--success-color) !important;

}



.form-control.is-invalid {

    border-color: var(--danger-color) !important;

}



/* Buttons with brand colors */

.btn-brand-primary {

    background-color: var(--primary-color);

    border-color: var(--primary-color);

    color: var(--text-primary);

}



.btn-brand-primary:hover {

    background-color: var(--primary-hover);

    border-color: var(--primary-hover);

    color: var(--text-primary);

}



.btn-brand-secondary {

    background-color: var(--secondary-color);

    border-color: var(--secondary-color);

    color: var(--text-white);

}



.btn-brand-secondary:hover {

    background-color: var(--secondary-hover);

    border-color: var(--secondary-hover);

    color: var(--text-white);

}



/* Table styling */

.table-brand th {

    background-color: var(--primary-color);

    color: var(--text-primary);

}



.table-hover tbody tr:hover {

    background-color: var(--primary-lighter);

}



/* Responsive adjustments */

@media (max-width: 768px) {

    :root {

        --spacing-lg: 1rem;

        --spacing-xl: 2rem;

        --spacing-xxl: 3rem;

    }

}



/* Print styles */

@media print {

    :root {

        --primary-color: #000000;

        --secondary-color: #000000;

        --text-primary: #000000;

        --text-secondary: #333333;

        --bg-primary: #ffffff;

        --bg-secondary: #ffffff;

        --border-color: #000000;

        --box-shadow: none;

    }

}
