/* ORIGIN8 Global Theme System - Single Hex Control
 * Change ONE hex value to update the entire site's theme/accent
 * 
 * THEME KNOBS (change these to update everything):
 * --o8-theme: Main brand color (navy blue)
 * --o8-accent: Secondary accent color (coral/pink)
 */

:root {
    /* === THEME CONTROL KNOBS === */
    /* Change ONLY these two hex values to update the entire site */
    --o8-theme: #0a1e34;    /* Main theme color (navy blue) */
    --o8-accent: #ec425f;   /* Accent color (coral/pink) */
    
    /* === ALTERNATIVE THEMES (uncomment to try) === */
    /* Purple & Gold Premium Theme */
    /* --o8-theme: #2d1b69; --o8-accent: #f59e0b; */
    
    /* Forest Green & Orange Theme */
    /* --o8-theme: #064e3b; --o8-accent: #ea580c; */
    
    /* Deep Blue & Electric Blue Theme */
    /* --o8-theme: #1e3a8a; --o8-accent: #0ea5e9; */
    
    /* Charcoal & Emerald Theme */
    /* --o8-theme: #374151; --o8-accent: #10b981; */
    
    /* === AUTO-GENERATED VARIATIONS === */
    /* These are automatically calculated from the knobs above */
    --o8-theme-light: #1a3a5c;
    --o8-theme-dark: #051119;
    --o8-theme-alpha-10: rgba(10, 30, 52, 0.1);
    --o8-theme-alpha-20: rgba(10, 30, 52, 0.2);
    --o8-theme-alpha-50: rgba(10, 30, 52, 0.5);
    --o8-theme-alpha-80: rgba(10, 30, 52, 0.8);
    --o8-theme-alpha-95: rgba(10, 30, 52, 0.95);
    
    --o8-accent-light: #f06b82;
    --o8-accent-dark: #d93654;
    --o8-accent-alpha-05: rgba(236, 66, 95, 0.05);
    --o8-accent-alpha-10: rgba(236, 66, 95, 0.1);
    --o8-accent-alpha-15: rgba(236, 66, 95, 0.15);
    --o8-accent-alpha-20: rgba(236, 66, 95, 0.2);
    --o8-accent-alpha-30: rgba(236, 66, 95, 0.3);
    --o8-accent-alpha-40: rgba(236, 66, 95, 0.4);
    --o8-accent-alpha-50: rgba(236, 66, 95, 0.5);
    
    /* === NEUTRAL COLORS === */
    --o8-white: #ffffff;
    --o8-light-gray: #f9f9f9;
    --o8-gray-400: #9ca3af;
    --o8-gray-500: #6b7280;
    --o8-gray-600: #4b5563;
    --o8-gray-700: #374151;
    --o8-text-primary: var(--o8-theme);
    --o8-text-secondary: #4a5568;
    --o8-text-muted: #718096;
    --o8-border: var(--o8-theme-alpha-10);
}

/* === UTILITY CLASSES === */

/* Text Colors */
.o8-text-theme { color: var(--o8-theme) !important; }
.o8-text-theme-light { color: var(--o8-theme-light) !important; }
.o8-text-accent { color: var(--o8-accent) !important; }
.o8-text-accent-light { color: var(--o8-accent-light) !important; }
.o8-text-white { color: var(--o8-white) !important; }
.o8-text-gray-400 { color: var(--o8-gray-400) !important; }
.o8-text-gray-600 { color: var(--o8-gray-600) !important; }
.o8-text-secondary { color: var(--o8-text-secondary) !important; }

/* Background Colors */
.o8-bg-theme { background: var(--o8-theme) !important; }
.o8-bg-accent { background: var(--o8-accent) !important; }
.o8-bg-white { background: var(--o8-white) !important; }
.o8-bg-light-gray { background: var(--o8-light-gray) !important; }
.o8-bg-accent-alpha-10 { background: var(--o8-accent-alpha-10) !important; }
.o8-bg-drawer {
    background:
      radial-gradient(1200px 600px at 15% 10%, var(--o8-accent-alpha-15), transparent 55%),
      radial-gradient(900px 500px at 85% 30%, var(--o8-theme-alpha-20), transparent 60%),
      var(--o8-theme-alpha-95) !important;
}

/* Text */
.text-origin-blue { color: var(--o8-accent) !important; }
.text-origin-blue-dark { color: var(--o8-accent-dark) !important; }
.hover\:text-origin-blue:hover { color: var(--o8-accent) !important; }
.hover\:text-origin-blue-dark:hover { color: var(--o8-accent-dark) !important; }

/* Background */
.bg-origin-blue { background-color: var(--o8-accent) !important; }
.bg-origin-blue-dark { background-color: var(--o8-accent-dark) !important; }
.hover\:bg-origin-blue:hover { background-color: var(--o8-accent) !important; }
.hover\:bg-origin-blue-dark:hover { background-color: var(--o8-accent-dark) !important; }

/* Borders */
.border-origin-blue { border-color: var(--o8-accent) !important; }
.hover\:border-origin-blue:hover { border-color: var(--o8-accent) !important; }
.border-origin-blue\/20 { border-color: color-mix(in srgb, var(--o8-accent), transparent 80%) !important; }

/* Opacity utility variants used in templates (best-effort) */
.bg-origin-blue\/5 { background-color: color-mix(in srgb, var(--o8-accent), transparent 95%) !important; }
.bg-origin-blue\/10 { background-color: color-mix(in srgb, var(--o8-accent), transparent 90%) !important; }
.text-origin-blue\/30 { color: color-mix(in srgb, var(--o8-accent), transparent 70%) !important; }

/* Cyan legacy (map to accent) */
.text-cyan-400 { color: var(--o8-accent) !important; }
.hover\:text-cyan-400:hover { color: var(--o8-accent) !important; }
.bg-cyan-400 { background-color: var(--o8-accent) !important; }
.hover\:bg-cyan-300:hover { background-color: var(--o8-accent-light) !important; }

/* Gradients */
.from-origin-blue { --tw-gradient-from: var(--o8-accent) !important; }
.to-origin-blue-dark { --tw-gradient-to: var(--o8-accent-dark) !important; }

/* Border Colors */
.o8-border-theme { border-color: var(--o8-theme) !important; }
.o8-border-accent { border-color: var(--o8-accent) !important; }
.o8-border-accent-20 { border-color: var(--o8-accent-alpha-20) !important; }
.o8-border-theme-10 { border-color: var(--o8-theme-alpha-10) !important; }

/* Gradients */
.o8-gradient-accent {
    background: linear-gradient(135deg, var(--o8-accent) 0%, var(--o8-accent-dark) 100%) !important;
}

.o8-gradient-theme {
    background: linear-gradient(135deg, var(--o8-theme) 0%, var(--o8-theme-light) 100%) !important;
}

/* Buttons - Premium styling */
.o8-btn-primary {
    background: linear-gradient(135deg, var(--o8-accent) 0%, var(--o8-accent-dark) 100%);
    color: var(--o8-white);
    font-weight: 700;
    border-radius: 0.75rem; /* rounded-xl */
    transition: all 0.3s ease;
    box-shadow: 
        0 10px 30px -5px var(--o8-accent-alpha-40),
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 -1px 0 rgba(0, 0, 0, 0.1) inset;
    position: relative;
    overflow: hidden;
}

.o8-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.o8-btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 15px 40px -5px var(--o8-accent-alpha-50),
        0 8px 25px -5px var(--o8-accent-alpha-30),
        0 1px 0 rgba(255, 255, 255, 0.3) inset,
        0 -1px 0 rgba(0, 0, 0, 0.1) inset;
}

.o8-btn-primary:hover::before {
    left: 100%;
}

.o8-btn-secondary {
    background: var(--o8-white);
    color: var(--o8-theme);
    border: 2px solid var(--o8-theme-alpha-20);
    font-weight: 700;
    border-radius: 0.75rem; /* rounded-xl */
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 15px -3px var(--o8-theme-alpha-10),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
    position: relative;
    overflow: hidden;
}

.o8-btn-secondary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--o8-theme-alpha-10);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.o8-btn-secondary:hover {
    border-color: var(--o8-theme);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px -5px var(--o8-theme-alpha-20),
        0 1px 0 rgba(255, 255, 255, 1) inset;
}

.o8-btn-secondary:hover::before {
    opacity: 1;
}

/* Cards - Premium styling */
.o8-card {
    background: var(--o8-white);
    border: 1px solid var(--o8-border);
    box-shadow: 
        0 4px 25px -5px var(--o8-theme-alpha-10),
        0 1px 0 rgba(255, 255, 255, 0.8) inset;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.o8-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--o8-accent-alpha-20), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.o8-card:hover {
    transform: translateY(-8px);
    border-color: var(--o8-accent-alpha-20);
    box-shadow: 
        0 20px 40px -10px var(--o8-theme-alpha-20),
        0 8px 25px -5px var(--o8-accent-alpha-10),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.o8-card:hover::before {
    opacity: 1;
}

/* Badge */
.o8-badge-accent {
    background: var(--o8-accent-alpha-10);
    border: 1px solid var(--o8-accent-alpha-20);
    color: var(--o8-accent);
}

.o8-badge-theme {
    background: var(--o8-theme-alpha-10);
    border: 1px solid var(--o8-theme-alpha-20);
    color: var(--o8-theme);
}

/* Hover Effects */
.o8-hover-accent:hover {
    color: var(--o8-accent) !important;
}

.o8-hover-theme:hover {
    color: var(--o8-theme) !important;
}

/* Group Hover Effects */
.group:hover .group-hover\:o8-text-accent {
    color: var(--o8-accent) !important;
}

.group:hover .group-hover\:o8-text-theme {
    color: var(--o8-theme) !important;
}

/* Glow Effects */
.o8-glow-accent {
    box-shadow: 0 0 30px var(--o8-accent-alpha-30);
}

.o8-text-glow-accent {
    text-shadow: 0 0 30px var(--o8-accent-alpha-40);
}

/* Animations */
@keyframes o8-float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.o8-animate-float {
    animation: o8-float 6s ease-in-out infinite;
}

/* Responsive Utilities */
@media (min-width: 768px) {
    .o8-btn-primary,
    .o8-btn-secondary {
        padding: 1rem 2.5rem;
        font-size: 1.125rem;
    }
}

/* Special Effects */
.o8-orb-accent {
    background: radial-gradient(circle, var(--o8-accent-alpha-10) 0%, transparent 70%);
}

.o8-orb-theme {
    background: radial-gradient(circle, var(--o8-theme-alpha-10) 0%, transparent 70%);
}

/* Scrollbar Theming */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--o8-accent) 0%, var(--o8-accent-dark) 100%);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--o8-accent-light) 0%, var(--o8-accent) 100%);
}

* {
    scrollbar-color: var(--o8-accent) #f1f5f9;
}

/* Modern Typography Enhancements */
.o8-text-hero {
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.o8-text-display {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

/* Modern Animations */
@keyframes o8-slide-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.o8-animate-slide-up {
    animation: o8-slide-up 0.8s ease-out forwards;
}

@keyframes o8-scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.o8-animate-scale-in {
    animation: o8-scale-in 0.6s ease-out forwards;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.o8-gradient-accent-modern {
    background: linear-gradient(135deg, 
        var(--o8-accent) 0%, 
        var(--o8-accent-dark) 50%,
        var(--o8-accent) 100%);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

/* Modern Cards */
.o8-card-modern {
    background: var(--o8-white);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.o8-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px var(--o8-accent-alpha-10);
}

/* Glassmorphism */
.o8-glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Print Styles */
@media print {
    .o8-text-accent,
    .o8-text-theme {
        color: #000 !important;
    }
}