/* css/_shared/_role-modal-theme.css */
/* =============================================================================
   ROLE SELECTION MODAL - THEME STYLES
   Path: /css/_shared/_role-modal-theme.css
   
   Purpose: Colors, shadows, visual styling for role selection modal
   Dependencies: 
   - /css/_shared/_typography.css (load first)
   - /css/_shared/_role-modal-base.css (load second)
   
   DO NOT include:
   - Layout/structure (see _role-modal-base.css)
   - Media queries (see _role-modal-responsive.css)
   ========================================================================== */

/* =============================================================================
   CSS VARIABLES - Colors
   ========================================================================== */

:root {
    /* Modal colors */
    --role-modal-backdrop: rgba(0, 0, 0, 0.5);
    --role-modal-bg: #ffffff;
    --role-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Text colors */
    --role-modal-title: #1f2937;
    --role-modal-subtitle: #6b7280;
    --role-modal-text: #374151;
    --role-modal-text-muted: #9ca3af;
    
    /* Option card colors */
    --role-option-bg: #f9fafb;
    --role-option-border: #e5e7eb;
    --role-option-border-hover: var(--primary, #667eea);
    
    /* Sponsor colors */
    --role-sponsor-icon-bg: rgba(102, 126, 234, 0.1);
    --role-sponsor-icon-color: var(--primary, #667eea);
    
    /* Advocate colors */
    --role-advocate-icon-bg: rgba(16, 185, 129, 0.1);
    --role-advocate-icon-color: #10b981;
    
    /* Checkbox colors */
    --role-checkbox-border: #d1d5db;
    --role-checkbox-checked-bg: var(--primary, #667eea);
    --role-checkbox-checked-border: var(--primary, #667eea);
}

/* =============================================================================
   BACKDROP
   ========================================================================== */

.role-modal__backdrop {
    background: var(--role-modal-backdrop);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* =============================================================================
   DIALOG
   ========================================================================== */

.role-modal__dialog {
    background: var(--role-modal-bg);
    box-shadow: var(--role-modal-shadow);
}

/* =============================================================================
   HEADER
   ========================================================================== */

.role-modal__title {
    color: var(--role-modal-title);
}

.role-modal__subtitle {
    color: var(--role-modal-subtitle);
}

/* =============================================================================
   ROLE OPTION BUTTON - Base
   ========================================================================== */

.role-option {
    background: var(--role-option-bg);
    border-color: var(--role-option-border);
}

.role-option:hover {
    border-color: var(--role-option-border-hover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.role-option:active {
    transform: translateX(2px);
}

/* =============================================================================
   ROLE OPTION - SPONSOR VARIANT
   ========================================================================== */

.role-option--sponsor .role-option__icon {
    background: var(--role-sponsor-icon-bg);
    color: var(--role-sponsor-icon-color);
}

.role-option--sponsor:hover {
    border-color: var(--role-sponsor-icon-color);
}

.role-option--sponsor .role-option__arrow {
    color: var(--role-sponsor-icon-color);
}

/* =============================================================================
   ROLE OPTION - ADVOCATE VARIANT
   ========================================================================== */

.role-option--advocate .role-option__icon {
    background: var(--role-advocate-icon-bg);
    color: var(--role-advocate-icon-color);
}

.role-option--advocate:hover {
    border-color: var(--role-advocate-icon-color);
}

.role-option--advocate .role-option__arrow {
    color: var(--role-advocate-icon-color);
}

/* =============================================================================
   ROLE OPTION - CONTENT
   ========================================================================== */

.role-option__title {
    color: var(--role-modal-title);
}

.role-option__description {
    color: var(--role-modal-text-muted);
}

.role-option:hover .role-option__description {
    color: var(--role-modal-text);
}

/* =============================================================================
   FOOTER
   ========================================================================== */

.role-modal__footer {
    border-top: 1px solid var(--role-option-border);
}

/* =============================================================================
   REMEMBER CHECKBOX
   ========================================================================== */

.role-modal__remember {
    color: var(--role-modal-text);
}

.role-modal__checkmark {
    border-color: var(--role-checkbox-border);
    background: var(--role-modal-bg);
}

.role-modal__checkbox:checked + .role-modal__checkmark {
    background: var(--role-checkbox-checked-bg);
    border-color: var(--role-checkbox-checked-border);
}

.role-modal__checkbox:focus + .role-modal__checkmark {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.role-modal__remember-text {
    color: var(--role-modal-subtitle);
}

/* =============================================================================
   DARK MODE SUPPORT (Optional - activate with data-theme="dark")
   ========================================================================== */

[data-theme="dark"] .role-modal__dialog,
.role-modal.dark .role-modal__dialog {
    --role-modal-bg: #1f2937;
    --role-modal-title: #f9fafb;
    --role-modal-subtitle: #9ca3af;
    --role-modal-text: #d1d5db;
    --role-modal-text-muted: #6b7280;
    --role-option-bg: #374151;
    --role-option-border: #4b5563;
    --role-checkbox-border: #6b7280;
}

/* ── Dark Mode (Bootstrap 5.3) ── */
[data-bs-theme="dark"] {
    --role-modal-bg: #2b3035;
    --role-modal-title: #e9ecef;
    --role-modal-subtitle: #adb5bd;
    --role-modal-text: #dee2e6;
    --role-modal-text-muted: #6c757d;
    --role-option-bg: #343a40;
    --role-option-border: #495057;
    --role-checkbox-border: #6c757d;
    --role-sponsor-icon-bg: rgba(var(--primary-rgb, 102, 126, 234), 0.15);
    --role-advocate-icon-bg: rgba(16, 185, 129, 0.15);
}