/* 
 * BJJ Video Analyzer - Global Color System
 * This file defines the consistent color palette used across the application
 */

:root {
    /* Primary brand colors */
    --brand-primary: #0d6efd;          /* Bootstrap primary blue */
    --brand-primary-dark: #0b5ed7;     /* Darker blue for hover states */
    --brand-primary-light: #86b7fe;    /* Lighter blue for borders/accents */
    
    /* Content type colors - matching search iconography */
    --color-videos: #0d6efd;           /* Primary blue for videos */
    --color-videos-hover: #0b5ed7;     /* Darker blue for video hover states */
    --color-videos-light: #e7f1ff;     /* Light blue background for video elements */
    
    --color-techniques: #7b1fa2;       /* Purple for techniques */
    --color-techniques-hover: #6a1b9a; /* Darker purple for technique hover states */
    --color-techniques-light: #f3e5f5; /* Light purple background for technique elements */
    
    --color-positions: #198754;        /* Green for positions */
    --color-positions-hover: #157347;  /* Darker green for position hover states */
    --color-positions-light: #d1e7dd;  /* Light green background for position elements */
    
    --color-phases: #fd7e14;           /* Orange for phases */
    --color-phases-hover: #e8680b;     /* Darker orange for phase hover states */
    --color-phases-light: #fff3cd;     /* Light orange background for phase elements */
    
    --color-mechanics: #6c757d;        /* Gray for mechanics */
    --color-mechanics-hover: #5c636a;  /* Darker gray for mechanic hover states */
    --color-mechanics-light: #f8f9fa;  /* Light gray background for mechanic elements */
    
    /* Status and state colors */
    --color-success: #198754;          /* Success green */
    --color-warning: #ffc107;          /* Warning yellow */
    --color-danger: #dc3545;           /* Error/danger red */
    --color-info: #0dcaf0;             /* Info cyan */
    
    /* Neutral colors */
    --color-light: #f8f9fa;            /* Light background */
    --color-medium: #6c757d;           /* Medium gray text */
    --color-dark: #212529;             /* Dark text */
    --color-white: #ffffff;            /* Pure white */
    
    /* Border and surface colors */
    --border-color: #dee2e6;           /* Standard border color */
    --border-color-light: #e9ecef;     /* Lighter border color */
    --surface-color: #ffffff;          /* Surface background */
    --surface-color-secondary: #f8f9fa; /* Secondary surface background */
}

/* Content type specific utility classes */
.text-videos { color: var(--color-videos) !important; }
.text-videos-hover:hover { color: var(--color-videos-hover) !important; }
.bg-videos { background-color: var(--color-videos) !important; }
.bg-videos-light { background-color: var(--color-videos-light) !important; }
.border-videos { border-color: var(--color-videos) !important; }

.text-techniques { color: var(--color-techniques) !important; }
.text-techniques-hover:hover { color: var(--color-techniques-hover) !important; }
.bg-techniques { background-color: var(--color-techniques) !important; }
.bg-techniques-light { background-color: var(--color-techniques-light) !important; }
.border-techniques { border-color: var(--color-techniques) !important; }

.text-positions { color: var(--color-positions) !important; }
.text-positions-hover:hover { color: var(--color-positions-hover) !important; }
.bg-positions { background-color: var(--color-positions) !important; }
.bg-positions-light { background-color: var(--color-positions-light) !important; }
.border-positions { border-color: var(--color-positions) !important; }

.text-phases { color: var(--color-phases) !important; }
.text-phases-hover:hover { color: var(--color-phases-hover) !important; }
.bg-phases { background-color: var(--color-phases) !important; }
.bg-phases-light { background-color: var(--color-phases-light) !important; }
.border-phases { border-color: var(--color-phases) !important; }

.text-mechanics { color: var(--color-mechanics) !important; }
.text-mechanics-hover:hover { color: var(--color-mechanics-hover) !important; }
.bg-mechanics { background-color: var(--color-mechanics) !important; }
.bg-mechanics-light { background-color: var(--color-mechanics-light) !important; }
.border-mechanics { border-color: var(--color-mechanics) !important; }

/* Button variants for content types */
.btn-videos {
    background-color: var(--color-videos);
    border-color: var(--color-videos);
    color: white;
}
.btn-videos:hover {
    background-color: var(--color-videos-hover);
    border-color: var(--color-videos-hover);
    color: white;
}
.btn-outline-videos {
    color: var(--color-videos);
    border-color: var(--color-videos);
}
.btn-outline-videos:hover {
    background-color: var(--color-videos);
    border-color: var(--color-videos);
    color: white;
}

.btn-techniques {
    background-color: var(--color-techniques);
    border-color: var(--color-techniques);
    color: white;
}
.btn-techniques:hover {
    background-color: var(--color-techniques-hover);
    border-color: var(--color-techniques-hover);
    color: white;
}
.btn-outline-techniques {
    color: var(--color-techniques);
    border-color: var(--color-techniques);
}
.btn-outline-techniques:hover {
    background-color: var(--color-techniques);
    border-color: var(--color-techniques);
    color: white;
}

.btn-positions {
    background-color: var(--color-positions);
    border-color: var(--color-positions);
    color: white;
}
.btn-positions:hover {
    background-color: var(--color-positions-hover);
    border-color: var(--color-positions-hover);
    color: white;
}
.btn-outline-positions {
    color: var(--color-positions);
    border-color: var(--color-positions);
}
.btn-outline-positions:hover {
    background-color: var(--color-positions);
    border-color: var(--color-positions);
    color: white;
}

/* Badge variants for content types */
.badge-videos {
    background-color: var(--color-videos);
    color: white;
}

.badge-techniques {
    background-color: var(--color-techniques);
    color: white;
}

.badge-positions {
    background-color: var(--color-positions);
    color: white;
}

.badge-phases {
    background-color: var(--color-phases);
    color: white;
}

.badge-mechanics {
    background-color: var(--color-mechanics);
    color: white;
}

/* Legacy support - keep the existing text-purple class */
.text-purple { 
    color: var(--color-techniques) !important; 
}

/* Search interface specific colors */
.search-icon-videos {
    color: var(--color-videos);
}

.search-icon-techniques {
    color: var(--color-techniques);
}

.search-icon-positions {
    color: var(--color-positions);
}

.search-icon-phases {
    color: var(--color-phases);
}

.search-icon-mechanics {
    color: var(--color-mechanics);
}

/* Keyboard shortcut styling */
.search-kbd {
    background-color: var(--color-light);
    border: 2px solid var(--border-color);
    border-radius: 6px;
    color: var(--color-dark);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Non-interactive elements styling */
.non-interactive {
    cursor: default;
}