/* ============================================
   BORDERS.CSS - STYLES DE BORDURES
   ============================================ */

/* ===== BORDERS GENERIQUES ===== */
.border {
    border: var(--border-light);
}

.border-0 {
    border: none;
}

.border-top {
    border-top: var(--border-light);
}

.border-top-0 {
    border-top: none;
}

.border-bottom {
    border-bottom: var(--border-light);
}

.border-bottom-0 {
    border-bottom: none;
}

.border-left {
    border-left: var(--border-light);
}

.border-left-0 {
    border-left: none;
}

.border-right {
    border-right: var(--border-light);
}

.border-right-0 {
    border-right: none;
}

/* ===== BORDER COLORS ===== */
.border-primary {
    border-color: var(--primary);
}

.border-primary-light {
    border-color: var(--primary-light);
}

.border-secondary {
    border-color: var(--secondary);
}

.border-success {
    border-color: var(--success);
}

.border-error {
    border-color: var(--error);
}

.border-warning {
    border-color: var(--warning);
}

.border-info {
    border-color: var(--info);
}

.border-cyan {
    border-color: var(--cyan);
}

.border-cyan-light {
    border-color: var(--cyan-light);
}

.border-light {
    border-color: rgba(255, 255, 255, 0.1);
}

.border-dark {
    border-color: rgba(0, 0, 0, 0.2);
}

/* ===== BORDER WIDTH ===== */
.border-1 {
    border-width: 1px;
}

.border-2 {
    border-width: 2px;
}

.border-3 {
    border-width: 3px;
}

.border-4 {
    border-width: 4px;
}

.border-5 {
    border-width: 5px;
}

/* ===== BORDER RADIUS ===== */
.rounded-0 {
    border-radius: 0;
}

.rounded-sm {
    border-radius: var(--border-radius-sm);
}

.rounded-md {
    border-radius: var(--border-radius-md);
}

.rounded-lg {
    border-radius: var(--border-radius-lg);
}

.rounded-full {
    border-radius: var(--border-radius-full);
}

.rounded-t {
    border-top-left-radius: var(--border-radius-lg);
    border-top-right-radius: var(--border-radius-lg);
}

.rounded-b {
    border-bottom-left-radius: var(--border-radius-lg);
    border-bottom-right-radius: var(--border-radius-lg);
}

.rounded-l {
    border-top-left-radius: var(--border-radius-lg);
    border-bottom-left-radius: var(--border-radius-lg);
}

.rounded-r {
    border-top-right-radius: var(--border-radius-lg);
    border-bottom-right-radius: var(--border-radius-lg);
}

.rounded-tl {
    border-top-left-radius: var(--border-radius-lg);
}

.rounded-tr {
    border-top-right-radius: var(--border-radius-lg);
}

.rounded-bl {
    border-bottom-left-radius: var(--border-radius-lg);
}

.rounded-br {
    border-bottom-right-radius: var(--border-radius-lg);
}

/* ===== BORDER STYLES ===== */
.border-solid {
    border-style: solid;
}

.border-dashed {
    border-style: dashed;
}

.border-dotted {
    border-style: dotted;
}

.border-double {
    border-style: double;
}

/* ===== OUTLINE ===== */
.outline {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.outline-none {
    outline: none;
}

.outline-primary {
    outline: 2px solid var(--primary);
}

.outline-secondary {
    outline: 2px solid var(--secondary);
}

.outline-success {
    outline: 2px solid var(--success);
}

.outline-error {
    outline: 2px solid var(--error);
}

/* ===== DIVIDER ===== */
.divider {
    width: 100%;
    height: 1px;
    background: var(--border-light);
    margin: var(--spacing-lg) 0;
}

.divider-vertical {
    width: 1px;
    height: 100%;
    background: var(--border-light);
}

.divider-dashed {
    background-image: linear-gradient(90deg, var(--primary) 50%, transparent 50%);
    background-size: 10px 1px;
    background-repeat: repeat-x;
    height: 1px;
}

/* ===== SHADOW ===== */
.shadow-none {
    box-shadow: none;
}

.shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.shadow-xl {
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
}

.shadow-2xl {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.shadow-inner {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* ===== SHADOW GLOW ===== */
.shadow-glow {
    box-shadow: 0 0 20px rgba(132, 86, 237, 0.4);
}

.shadow-glow-lg {
    box-shadow: 0 0 40px rgba(132, 86, 237, 0.6);
}

.shadow-glow-primary {
    box-shadow: 0 0 20px rgba(132, 86, 237, 0.4);
}

.shadow-glow-secondary {
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.4);
}

.shadow-glow-success {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

.shadow-glow-error {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .md\:border-0 {
        border: none;
    }

    .md\:rounded-md {
        border-radius: var(--border-radius-md);
    }

    .md\:rounded-lg {
        border-radius: var(--border-radius-lg);
    }

    .md\:shadow-none {
        box-shadow: none;
    }

    .md\:shadow-md {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
}