/*
 * ============================================
 * ONEINCH THEME SYSTEM - Dynamic Styling
 * ============================================
 * This file applies customizable theme variables
 * throughout the entire application
 */

/* ============================================
   GLOBAL OVERRIDES - Apply Theme Variables
   ============================================ */

/* Body and Base Elements */
body,
html,
body.pushable > .pusher {
    background: var(--oi-bg, var(--color-bg)) !important;
    color: var(--oi-text, var(--color-text-primary)) !important;
    font-family: var(--oi-font-primary, var(--font-body)) !important;
    font-size: var(--oi-font-size-base, 16px) !important;
    line-height: var(--oi-line-height, 1.6) !important;
    letter-spacing: var(--oi-letter-spacing, 0.01em) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.title, .heading, .header {
    font-family: var(--oi-font-heading, var(--font-display)) !important;
    color: var(--oi-text, var(--color-text-primary)) !important;
    letter-spacing: var(--oi-heading-letter-spacing, 0.05em) !important;
}

/* Code and Monospace */
code, pre, .code, .mono,
.monospace, .terminal, .console {
    font-family: var(--oi-font-mono, var(--font-mono)) !important;
}

/* ============================================
   CARDS & CONTAINERS
   ============================================ */

.card, .ui.card, .ui.cards > .card,
.segment, .ui.segment,
.box, .container-box,
.panel, .modal-content,
.dropdown .menu, .ui.dropdown .menu {
    background-color: var(--oi-card, var(--color-surface)) !important;
    border-color: var(--oi-border, var(--color-border)) !important;
    border-radius: var(--oi-radius, 12px) !important;
    border-width: var(--oi-border-width, 2px) !important;
    box-shadow: var(--oi-shadow-md, var(--shadow-md)) !important;
}

.card:hover, .ui.card:hover,
.interactive-card:hover {
    transform: translateY(-4px) scale(var(--oi-hover-scale-sm, 1.02)) !important;
    box-shadow: var(--oi-shadow-lg, var(--shadow-lg)) !important;
    border-color: var(--oi-primary, var(--color-accent)) !important;
    transition: all var(--oi-transition-base, 0.35s) cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Elevated Surfaces */
.modal, .popover, .tooltip,
.elevated, .raised,
.dropdown-menu {
    background: var(--oi-elevated, var(--color-surface-elevated)) !important;
    box-shadow: var(--oi-shadow-xl, var(--shadow-lg)) !important;
}

/* ============================================
   BUTTONS & INTERACTIVE ELEMENTS
   ============================================ */

/* Primary Buttons */
.btn-primary, .ui.primary.button,
button.primary, .button.primary,
.cta-button, .action-primary {
    background: var(--oi-gradient-primary, var(--oi-primary)) !important;
    border-color: var(--oi-primary, var(--color-accent)) !important;
    color: var(--oi-bg, #000) !important;
    font-family: var(--oi-font-heading, var(--font-display)) !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-radius: var(--oi-radius-sm, 8px) !important;
    padding: var(--oi-space-sm, 1rem) var(--oi-space-lg, 2rem) !important;
    box-shadow: var(--oi-glow-primary, var(--glow-accent)) !important;
    transition: all var(--oi-transition-base, 0.35s) cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-primary:hover, .ui.primary.button:hover,
button.primary:hover, .button.primary:hover {
    background: var(--oi-gradient-accent, var(--oi-accent)) !important;
    transform: translateY(-3px) scale(var(--oi-hover-scale-sm, 1.02)) !important;
    box-shadow: var(--oi-glow-intense, 0 0 40px rgba(139, 38, 53, 0.9)) !important;
}

.btn-primary:active, .ui.primary.button:active {
    transform: translateY(-1px) scale(0.98) !important;
}

/* Secondary Buttons */
.btn-secondary, .ui.secondary.button,
button.secondary, .button.secondary {
    background: transparent !important;
    border: var(--oi-border-width, 2px) solid var(--oi-accent, var(--color-accent)) !important;
    color: var(--oi-accent, var(--color-accent)) !important;
    transition: all var(--oi-transition-fast, 0.2s) !important;
}

.btn-secondary:hover, .ui.secondary.button:hover {
    background: var(--oi-accent, var(--color-accent)) !important;
    color: var(--oi-bg, #000) !important;
    box-shadow: var(--oi-glow-accent, var(--glow-accent)) !important;
}

/* ============================================
   LINKS & TEXT COLORS
   ============================================ */

/* Primary Links */
a, .link, a.item {
    color: var(--oi-accent, var(--color-accent)) !important;
    transition: color var(--oi-transition-fast, 0.2s) !important;
}

a:hover, .link:hover, a.item:hover {
    color: var(--oi-primary, var(--color-accent-hover)) !important;
    text-shadow: var(--oi-glow-accent, 0 0 20px currentColor) !important;
}

/* Secondary Text */
.text-muted, .secondary, .description,
.subtitle, .caption, .meta {
    color: var(--oi-text-secondary, var(--color-text-secondary)) !important;
}

/* Tertiary Text */
.text-tertiary, .dimmed, .faded {
    color: var(--oi-text-tertiary, var(--color-text-tertiary)) !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

input, textarea, select,
.ui.input input, .ui.form input,
.ui.form textarea, .ui.form select {
    background: var(--oi-card, var(--color-surface)) !important;
    border: var(--oi-border-width, 2px) solid var(--oi-border, var(--color-border)) !important;
    border-radius: var(--oi-radius-sm, 8px) !important;
    color: var(--oi-text, var(--color-text-primary)) !important;
    font-family: var(--oi-font-primary, var(--font-body)) !important;
    padding: var(--oi-space-sm, 1rem) !important;
    transition: all var(--oi-transition-fast, 0.2s) !important;
}

input:focus, textarea:focus, select:focus,
.ui.input input:focus {
    border-color: var(--oi-primary, var(--color-accent)) !important;
    box-shadow: 0 0 0 3px var(--oi-glow-primary, rgba(139, 38, 53, 0.3)) !important;
    transform: translateY(-2px) !important;
}

/* ============================================
   NAVIGATION & HEADER
   ============================================ */

.nb-nav, .navbar, header.main-header {
    height: var(--oi-nav-height, var(--nav-height, 80px)) !important;
    background: rgba(var(--oi-bg-rgb, 26, 15, 10), 0.9) !important;
    backdrop-filter: blur(var(--oi-backdrop-blur, 20px)) !important;
    -webkit-backdrop-filter: blur(var(--oi-backdrop-blur, 20px)) !important;
    border-bottom: var(--oi-border-width-thick, 3px) solid var(--oi-primary, var(--color-primary)) !important;
    box-shadow: var(--oi-shadow-lg, var(--shadow-lg)) !important;
}

.nb-logo, .navbar-brand, .site-logo {
    font-family: var(--oi-font-heading, var(--font-display)) !important;
    font-size: var(--oi-font-size-2xl, 32px) !important;
    letter-spacing: var(--oi-heading-letter-spacing, 0.05em) !important;
    text-shadow: var(--oi-glow-primary, 0 0 20px rgba(139, 38, 53, 0.6)) !important;
    transition: transform var(--oi-transition-fast, 0.2s) !important;
}

.nb-logo:hover, .navbar-brand:hover {
    transform: scale(var(--oi-hover-scale-sm, 1.02)) !important;
}

/* ============================================
   BORDERS & DIVIDERS
   ============================================ */

.border, hr, .divider,
.ui.divider, .separator {
    border-color: var(--oi-border, var(--color-border)) !important;
    border-width: var(--oi-border-width, 2px) !important;
}

.border-strong, hr.strong,
.emphasized-border {
    border-color: var(--oi-border-strong, var(--color-border-strong)) !important;
    border-width: var(--oi-border-width-thick, 3px) !important;
}

/* ============================================
   SPACING UTILITIES
   ============================================ */

.space-xs { margin: var(--oi-space-xs, 0.5rem) !important; }
.space-sm { margin: var(--oi-space-sm, 1rem) !important; }
.space-md { margin: var(--oi-space-md, 1.5rem) !important; }
.space-lg { margin: var(--oi-space-lg, 2rem) !important; }
.space-xl { margin: var(--oi-space-xl, 3rem) !important; }

.p-xs { padding: var(--oi-space-xs, 0.5rem) !important; }
.p-sm { padding: var(--oi-space-sm, 1rem) !important; }
.p-md { padding: var(--oi-space-md, 1.5rem) !important; }
.p-lg { padding: var(--oi-space-lg, 2rem) !important; }
.p-xl { padding: var(--oi-space-xl, 3rem) !important; }

.gap-sm { gap: var(--oi-space-sm, 1rem) !important; }
.gap-md { gap: var(--oi-space-md, 1.5rem) !important; }
.gap-lg { gap: var(--oi-grid-gap, 2rem) !important; }

/* ============================================
   EFFECTS & ENHANCEMENTS
   ============================================ */

/* Glass Morphism */
.glass, .glass-panel, .frosted {
    background: rgba(var(--oi-elevated-rgb, 61, 35, 23), var(--oi-glass-opacity, 0.1)) !important;
    backdrop-filter: blur(var(--oi-glass-blur, 20px)) !important;
    -webkit-backdrop-filter: blur(var(--oi-glass-blur, 20px)) !important;
    border: var(--oi-glass-border, 1px solid rgba(255,255,255,0.1)) !important;
}

/* Glow Effects */
.glow-primary {
    box-shadow: var(--oi-glow-primary, var(--glow-accent)) !important;
}

.glow-accent {
    box-shadow: var(--oi-glow-accent, var(--glow-accent)) !important;
}

.glow-intense {
    box-shadow: var(--oi-glow-intense, 0 0 40px currentColor) !important;
}

/* Gradients */
.gradient-primary {
    background: var(--oi-gradient-primary, linear-gradient(135deg, #8B2635 0%, #B4475A 100%)) !important;
}

.gradient-accent {
    background: var(--oi-gradient-accent, linear-gradient(135deg, #B4475A 0%, #6D442C 100%)) !important;
}

.gradient-bg {
    background: var(--oi-gradient-bg, linear-gradient(180deg, #1A0F0A 0%, #0F0808 100%)) !important;
}

/* ============================================
   STATE COLORS
   ============================================ */

.success, .positive, .ui.positive.message {
    color: var(--oi-success, #4CAF50) !important;
    border-color: var(--oi-success, #4CAF50) !important;
}

.warning, .ui.warning.message {
    color: var(--oi-warning, #FF9800) !important;
    border-color: var(--oi-warning, #FF9800) !important;
}

.error, .negative, .ui.negative.message {
    color: var(--oi-error, #F44336) !important;
    border-color: var(--oi-error, #F44336) !important;
}

.info, .ui.info.message {
    color: var(--oi-info, #2196F3) !important;
    border-color: var(--oi-info, #2196F3) !important;
}

/* ============================================
   ANIMATIONS
   ============================================ */

.animated, .transition-enabled {
    transition: all var(--oi-transition-base, 0.35s) cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.animated-fast {
    transition: all var(--oi-transition-fast, 0.2s) cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.animated-slow {
    transition: all var(--oi-transition-slow, 0.6s) cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.animated-bounce {
    transition: all var(--oi-transition-bounce, 0.5s) cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* Hover Animations */
.hover-lift:hover {
    transform: translateY(-4px) scale(var(--oi-hover-scale-sm, 1.02)) !important;
    box-shadow: var(--oi-shadow-lg, var(--shadow-lg)) !important;
}

.hover-grow:hover {
    transform: scale(var(--oi-hover-scale, 1.05)) !important;
}

.hover-glow:hover {
    box-shadow: var(--oi-glow-primary, 0 0 30px currentColor) !important;
}

/* ============================================
   ADVANCED FEATURES
   ============================================ */

/* Particles Background (when enabled) */
body.particles-enabled::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(
        circle at 50% 50%,
        var(--oi-primary, #8B2635) 1px,
        transparent 1px
    );
    background-size: 50px 50px;
    opacity: var(--particles-opacity, 0.3);
    pointer-events: none;
    z-index: 0;
    animation: particleFloat 60s linear infinite;
}

@keyframes particleFloat {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

/* Noise Texture (when enabled) */
body.noise-texture::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii43NSIgc3RpdGNoVGlsZXM9InN0aXRjaCIgdHlwZT0iZnJhY3RhbE5vaXNlIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGQ9Ik0wIDBoMzAwdjMwMEgweiIgZmlsdGVyPSJ1cmwoI2EpIiBvcGFjaXR5PSIuMDUiLz48L3N2Zz4=');
    opacity: 0.03;
    pointer-events: none;
    z-index: 1;
}

/* Vignette Effect (when enabled) */
body.vignette::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Scan Lines (when enabled) */
body.scan-lines::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.1) 2px,
        rgba(0, 0, 0, 0.1) 4px
    );
    pointer-events: none;
    z-index: 3;
    animation: scanMove 10s linear infinite;
}

@keyframes scanMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 4px;
    }
}

/* Smooth Scrolling */
html.smooth-scroll {
    scroll-behavior: smooth;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    body, html {
        font-size: var(--oi-font-size-sm, 14px) !important;
    }

    h1 {
        font-size: var(--oi-font-size-xl, 24px) !important;
    }

    .nb-nav, .navbar {
        height: calc(var(--oi-nav-height, 80px) * 0.8) !important;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* GPU Acceleration for Smooth Animations */
.card, .button, .hover-lift, .hover-grow,
.animated, .transition-enabled {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}