/* theme-variables.css */
:root {
    /* Organization brand colors */
    /* --org-sidebar-color: #343a40;
    --org-button-color: #0d6efd;
    --org-button-hover-color: #0b5ed7;
    --org-button-light: #3d8bfd;
    --org-button-lighter: #ebf2ff;
    --org-button-dark: #0a58ca;
    --org-bg-subtle: #f8f9fa;
    --org-focus-ring-color: rgba(13, 110, 253, 0.25); */

      /* Organization colors */
    --org-sidebar-color: #16AFDC;
    --org-button-color: #E65000;
    --org-button-hover-color: #d94c00;
    --org-button-light: #ff7b3d;
    --org-button-lighter: #ffe4d6;
    --org-button-dark: #cc4700;
    --org-bg-subtle: #fff5f0;

    /* Organization styling */
    --org-font-family: 'Jost', sans-serif;
    --org-logo-width: 312px;
    --org-logo-height: 156px;

    /* Student and staff colors */
    --custom-student-color: #4CAF50; /* A vibrant green */
    --custom-staff-color: #FF9800;  /* A bright orange */
    --cechat-purple-color: #9571C2; /* A deep purple */

    /* System colors */
    --system-gray-100: #f8f9fa;
    --system-gray-200: #e9ecef;
    --system-gray-300: #dee2e6;
    --system-gray-400: #ced4da;
    --system-gray-500: #adb5bd;
    --system-gray-600: #6c757d;
    --system-gray-700: #495057;
    --system-gray-800: #343a40;
    --system-gray-900: #212529;

    /* Spacing units */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 1rem;
    --spacing-4: 1.5rem;
    --spacing-5: 2rem;

    /* Border radiuses */
    --border-radius-sm: 0.25rem;
    --border-radius: 0.375rem;
    --border-radius-lg: 0.5rem;
    --border-radius-xl: 1rem;
}

/* Apply theme variables to common elements */
body {
    font-family: var(--org-font-family);
}

.sidebar {
    background-color: var(--org-sidebar-color);
}

.btn-primary {
    background-color: var(--org-button-color);
    border-color: var(--org-button-color);
}

.btn-primary:hover {
    background-color: var(--org-button-hover-color);
    border-color: var(--org-button-hover-color);
}

.btn-outline-primary {
    color: var(--org-button-color);
    border-color: var(--org-button-color);
}

.btn-outline-primary:hover {
    background-color: var(--org-button-color);
    border-color: var(--org-button-color);
}

.form-control:focus {
    border-color: var(--org-button-color);
    box-shadow: 0 0 0 0.25rem var(--org-focus-ring-color);
}

.progress-bar {
    background-color: var(--org-button-color);
}

a {
    color: var(--org-button-color);
}

a:hover {
    color: var(--org-button-hover-color);
}

.notification-badge {
    background-color: var(--org-button-color);
}

/* Logo styles */
.cogniti-home-logo {
    width: var(--org-logo-width);
    height: var(--org-logo-height);
    object-fit: contain;
}