/**
 * Coderz Brand Design System
 * نظام تصميم كودرز
 * 
 * Primary: #157EEE (Coderz Blue)
 * Secondary: #36454F (Charcoal Gray)
 */

/* ============================================
   COLOR PALETTE
   ============================================ */

:root {
    /* === Primary Colors === */
    --c-primary: #157EEE;
    --c-primary-hover: #0D5BB8;
    --c-primary-active: #094A96;
    --c-primary-light: #4A9DF4;
    --c-primary-lighter: #7DBAF7;
    --c-primary-bg: rgba(21, 126, 238, 0.08);
    --c-primary-bg-hover: rgba(21, 126, 238, 0.12);
    --c-primary-rgb: 21, 126, 238;

    /* === Secondary Colors === */
    --c-secondary: #36454F;
    --c-secondary-hover: #2A363E;
    --c-secondary-active: #1E282E;
    --c-secondary-light: #4D5D68;
    --c-secondary-lighter: #657681;
    --c-secondary-rgb: 54, 69, 79;

    /* === Success/Green === */
    --c-success: #28C76F;
    --c-success-hover: #1F9D57;
    --c-success-light: #55D98D;
    --c-success-bg: rgba(40, 199, 111, 0.1);

    /* === Danger/Red === */
    --c-danger: #EA5455;
    --c-danger-hover: #D63031;
    --c-danger-light: #EF7879;
    --c-danger-bg: rgba(234, 84, 85, 0.1);

    /* === Warning/Orange === */
    --c-warning: #FF9F43;
    --c-warning-hover: #E68A2E;
    --c-warning-light: #FFB56B;
    --c-warning-bg: rgba(255, 159, 67, 0.1);

    /* === Info/Cyan === */
    --c-info: #00CFE8;
    --c-info-hover: #00A8BC;
    --c-info-light: #33D9ED;
    --c-info-bg: rgba(0, 207, 232, 0.1);

    /* === Neutral/Gray === */
    --c-gray-50: #FAFBFC;
    --c-gray-100: #F4F6F8;
    --c-gray-200: #E9EDF2;
    --c-gray-300: #DDE2E8;
    --c-gray-400: #B4BCC7;
    --c-gray-500: #8E99A4;
    --c-gray-600: #5D6D7E;
    --c-gray-700: #3D4F5F;
    --c-gray-800: #2C3E50;
    --c-gray-900: #1A252F;

    /* === Text Colors === */
    --c-text-primary: #2C3E50;
    --c-text-secondary: #5D6D7E;
    --c-text-muted: #8E99A4;
    --c-text-light: #AEB6BF;
    --c-text-inverse: #FFFFFF;

    /* === Background Colors === */
    --c-bg-white: #FFFFFF;
    --c-bg-light: #F8F9FA;
    --c-bg-secondary: #EEF2F6;
    --c-bg-dark: #1A1F2C;
    --c-bg-darker: #141821;

    /* === Border Colors === */
    --c-border-light: #F1F4F8;
    --c-border: #E2E8F0;
    --c-border-dark: #CBD5E0;
}

/* ============================================
   BUTTON STYLES
   ============================================ */

/* Primary Button */
.btn-brand-primary {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-hover) 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(var(--c-primary-rgb), 0.35);
}

.btn-brand-primary:hover {
    background: linear-gradient(135deg, var(--c-primary-hover) 0%, var(--c-primary-active) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--c-primary-rgb), 0.4);
}

.btn-brand-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--c-primary-rgb), 0.3);
}

.btn-brand-primary:disabled {
    background: var(--c-gray-400);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Secondary Button */
.btn-brand-secondary {
    background: linear-gradient(135deg, var(--c-secondary) 0%, var(--c-secondary-hover) 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(var(--c-secondary-rgb), 0.35);
}

.btn-brand-secondary:hover {
    background: linear-gradient(135deg, var(--c-secondary-hover) 0%, var(--c-secondary-active) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--c-secondary-rgb), 0.4);
}

/* Outline Button */
.btn-brand-outline {
    background: transparent;
    color: var(--c-primary);
    border: 2px solid var(--c-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-brand-outline:hover {
    background: var(--c-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(var(--c-primary-rgb), 0.35);
}

/* Light Button */
.btn-brand-light {
    background: var(--c-primary-bg);
    color: var(--c-primary);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-brand-light:hover {
    background: var(--c-primary-bg-hover);
    transform: translateY(-1px);
}

/* ============================================
   TEXT UTILITIES
   ============================================ */

.text-brand-primary {
    color: var(--c-primary) !important;
}

.text-brand-secondary {
    color: var(--c-secondary) !important;
}

.text-brand-success {
    color: var(--c-success) !important;
}

.text-brand-danger {
    color: var(--c-danger) !important;
}

.text-brand-warning {
    color: var(--c-warning) !important;
}

.text-brand-info {
    color: var(--c-info) !important;
}

/* ============================================
   BACKGROUND UTILITIES
   ============================================ */

.bg-brand-primary {
    background-color: var(--c-primary) !important;
}

.bg-brand-primary-light {
    background-color: var(--c-primary-bg) !important;
}

.bg-brand-secondary {
    background-color: var(--c-secondary) !important;
}

.bg-brand-success {
    background-color: var(--c-success) !important;
}

.bg-brand-success-light {
    background-color: var(--c-success-bg) !important;
}

.bg-brand-danger {
    background-color: var(--c-danger) !important;
}

.bg-brand-danger-light {
    background-color: var(--c-danger-bg) !important;
}

.bg-brand-warning {
    background-color: var(--c-warning) !important;
}

.bg-brand-warning-light {
    background-color: var(--c-warning-bg) !important;
}

.bg-brand-info {
    background-color: var(--c-info) !important;
}

.bg-brand-info-light {
    background-color: var(--c-info-bg) !important;
}

/* ============================================
   BORDER UTILITIES
   ============================================ */

.border-brand-primary {
    border-color: var(--c-primary) !important;
}

.border-brand-secondary {
    border-color: var(--c-secondary) !important;
}

.border-brand-success {
    border-color: var(--c-success) !important;
}

.border-brand-danger {
    border-color: var(--c-danger) !important;
}

/* ============================================
   GRADIENT TEXT
   ============================================ */

.gradient-text-primary {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-text-brand {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================
   SHADOWS WITH BRAND COLOR
   ============================================ */

.shadow-brand-sm {
    box-shadow: 0 2px 4px rgba(var(--c-primary-rgb), 0.06);
}

.shadow-brand-md {
    box-shadow: 0 4px 12px rgba(var(--c-primary-rgb), 0.08);
}

.shadow-brand-lg {
    box-shadow: 0 8px 24px rgba(var(--c-primary-rgb), 0.12);
}

.shadow-brand-xl {
    box-shadow: 0 16px 48px rgba(var(--c-primary-rgb), 0.16);
}

.shadow-brand-primary {
    box-shadow: 0 4px 14px rgba(var(--c-primary-rgb), 0.35);
}

/* ============================================
   BADGES
   ============================================ */

.badge-brand-primary {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: var(--c-primary);
    color: white;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-brand-primary-light {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: var(--c-primary-bg);
    color: var(--c-primary);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-brand-success {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: var(--c-success-bg);
    color: var(--c-success);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-brand-danger {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: var(--c-danger-bg);
    color: var(--c-danger);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-brand-warning {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: var(--c-warning-bg);
    color: var(--c-warning);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

.form-control-brand:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.1);
    outline: none;
}

.form-check-input-brand:checked {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
}

/* ============================================
   LINKS
   ============================================ */

.link-brand {
    color: var(--c-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.link-brand:hover {
    color: var(--c-primary-hover);
    text-decoration: underline;
}

/* ============================================
   CARDS
   ============================================ */

.card-brand {
    background: var(--c-bg-white);
    border-radius: 12px;
    border: 1px solid var(--c-border);
    box-shadow: 0 4px 12px rgba(var(--c-primary-rgb), 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-brand:hover {
    border-color: var(--c-primary-light);
    box-shadow: 0 8px 24px rgba(var(--c-primary-rgb), 0.12);
    transform: translateY(-4px);
}

/* ============================================
   SELECTION & FOCUS
   ============================================ */

::selection {
    background: rgba(var(--c-primary-rgb), 0.2);
    color: var(--c-text-primary);
}

:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ============================================
   SCROLLBAR
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--c-gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--c-gray-400);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--c-primary);
}