/* 999DEX Platform-Specific Theme - Purple Innovation */
/* Uses design system variables from /css/design-system/variables.css */

:root {
    /* Platform-specific overrides (using design system colors) */
    --platform-primary: var(--accent-purple);
    --platform-secondary: var(--accent-cyan);
    --platform-gradient: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-cyan) 100%);
    --platform-glow: rgba(168, 85, 247, 0.3);
}

/* Hero section with platform color */
.hero-section,
.main-hero {
    background: linear-gradient(135deg,
        rgba(168, 85, 247, 0.1) 0%,
        rgba(236, 72, 153, 0.05) 100%
    );
}

/* Navigation active states */
nav a.active,
.nav-link.active {
    color: var(--platform-primary) !important;
    border-bottom: 2px solid var(--platform-primary);
}

/* Primary buttons */
.btn-primary,
button.primary,
.create-token-btn {
    background: var(--platform-gradient);
    box-shadow: var(--shadow-glow-purple);
    transition: var(--transition-all-fast);
}

.btn-primary:hover,
button.primary:hover {
    box-shadow: 0 6px 30px var(--platform-glow);
    transform: translateY(-2px);
}

/* Card accents */
.token-card:hover,
.card:hover {
    border-color: var(--platform-primary);
    box-shadow: 0 8px 30px var(--platform-glow);
}

/* Stats and highlights */
.stat-value,
.highlight {
    color: var(--platform-primary);
}

/* Platform badge */
.platform-badge {
    position: fixed;
    top: 80px;
    right: var(--spacing-lg);
    background: var(--platform-gradient);
    color: var(--text-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    z-index: 100;
    box-shadow: var(--shadow-glow-purple);
}

.platform-badge::before {
    content: "🚀 999DEX";
}

/* Loading states */
.skeleton,
.loading {
    background: linear-gradient(
        90deg,
        rgba(168, 85, 247, 0.1) 25%,
        rgba(168, 85, 247, 0.2) 50%,
        rgba(168, 85, 247, 0.1) 75%
    );
}

/* Focus states */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--platform-primary);
    box-shadow: 0 0 0 3px var(--platform-glow);
}

/* Success states */
.success,
.notification.success {
    background: linear-gradient(135deg,
        rgba(168, 85, 247, 0.2) 0%,
        rgba(16, 185, 129, 0.2) 100%
    );
    border-left: var(--spacing-xs) solid var(--platform-primary);
}