/* ========== DESIGN SYSTEM CSS ========== */
/* This file provides different visual design systems for ebssweb.com */
/* Switch between: vibrant, brutalist, minimal, modern */

/* ========== DEFAULT: VIBRANT DESIGN ========== */
body[data-design="vibrant"],
body:not([data-design]) {
    /* Vibrant uses the main theme colors */
    /* All designs already include this */
}

/* ========== BRUTALIST DESIGN ========== */
body[data-design="brutalist"] {
    --primary-color: #000000 !important;
    --secondary-color: #1a1a1a !important;
    --tertiary-color: #333333 !important;
    --accent-color: #666666 !important;
    --gradient-bg: linear-gradient(-45deg, #1a1a1a, #2a2a2a, #1a1a1a, #252525) !important;
}

body[data-design="brutalist"] .btn-primary {
    background: #000000 !important;
    border: 2px solid #000000 !important;
}

body[data-design="brutalist"] .btn-primary:hover {
    background: #333333 !important;
    border-color: #333333 !important;
}

body[data-design="brutalist"] .glass {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #000000 !important;
}

body[data-design="brutalist"] header {
    background: #1a1a1a !important;
    border-bottom: 3px solid #000000 !important;
}

body[data-design="brutalist"] header .logo {
    background: none !important;
    -webkit-text-fill-color: unset !important;
    color: #ffffff !important;
    font-weight: 900 !important;
}

body[data-design="brutalist"] .nav-links a {
    background: none !important;
    border: 2px solid #000000 !important;
    color: #000000 !important;
}

body[data-design="brutalist"] .nav-links a:hover {
    background: #000000 !important;
    color: #ffffff !important;
}

body[data-design="brutalist"] .hero::before {
    display: none !important;
}

body[data-design="brutalist"] .service-card {
    border: 2px solid #000000 !important;
    background: #ffffff !important;
}

body[data-design="brutalist"] .service-card:hover {
    background: #f5f5f5 !important;
}

body[data-design="brutalist"] .section-title {
    font-weight: 900 !important;
    letter-spacing: 2px !important;
}

body[data-design="brutalist"] footer {
    background: #000000 !important;
    border-top: 3px solid #000000 !important;
}

/* ========== MINIMAL DESIGN ========== */
body[data-design="minimal"] {
    --primary-color: #000000 !important;
    --secondary-color: #ffffff !important;
    --tertiary-color: #cccccc !important;
    --accent-color: #999999 !important;
    --gradient-bg: linear-gradient(-45deg, #f5f5f5, #ffffff, #f5f5f5, #eeeeee) !important;
}

body[data-design="minimal"] * {
    transition: none !important;
    animation: none !important;
}

body[data-design="minimal"] .btn-primary {
    background: #000000 !important;
    color: #ffffff !important;
}

body[data-design="minimal"] header {
    background: #ffffff !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

body[data-design="minimal"] .service-card,
body[data-design="minimal"] .portfolio-item,
body[data-design="minimal"] .pricing-card {
    border: 1px solid #e0e0e0 !important;
    box-shadow: none !important;
}

body[data-design="minimal"] .hero::before {
    display: none !important;
}

body[data-design="minimal"] .cta {
    background: #f5f5f5 !important;
}

/* ========== MODERN DESIGN ========== */
body[data-design="modern"] {
    --primary-color: #6366f1 !important;
    --secondary-color: #8b5cf6 !important;
    --tertiary-color: #06b6d4 !important;
    --accent-color: #14b8a6 !important;
    --gradient-bg: linear-gradient(-45deg, #6366f1, #8b5cf6, #06b6d4, #14b8a6) !important;
}

body[data-design="modern"] .btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
}

body[data-design="modern"] .service-card {
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    background: rgba(99, 102, 241, 0.05) !important;
}

body[data-design="modern"] .service-card:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}

body[data-design="modern"] header {
    background: rgba(99, 102, 241, 0.05) !important;
    border-bottom: 1px solid rgba(99, 102, 241, 0.2) !important;
}

/* ========== DESIGN SYSTEM UTILITIES ========== */

/* Smooth transitions between designs */
body {
    transition: background 0.5s ease;
}

/* Ensure admin panel is always visible when active */
.admin-control-panel.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}