/* ClusterGlow Vaporwave Theme Override */
/* This file overrides the default digidash-config-ui variables to match ClusterGlow's vaporwave aesthetic */

:root {
    /* Background colors - Deep purple/black vaporwave backgrounds */
    --bg-primary: #0a0a1a;      /* Deep purple-black */
    --bg-secondary: #1a1a3e;    /* Dark purple */
    --bg-tertiary: #252545;     /* Medium purple */

    /* Text colors - Light for contrast */
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-tertiary: #888888;

    /* Accent colors - Vaporwave pink and cyan */
    --accent-primary: #FF6AD5;      /* Hot pink */
    --accent-hover: #ff85de;        /* Lighter pink */
    --accent-secondary: #00F5FF;    /* Cyan */
    --accent-purple: #B967FF;       /* Purple */
    --accent-green: #05FFA1;        /* Neon green */

    /* Border colors - Subtle with vaporwave accents */
    --border-primary: #2a2a4e;
    --border-secondary: #3a3a5e;
    --border-tertiary: #4a4a6e;
    --border-accent: #FF6AD5;       /* Pink accent border */

    /* Button colors - Vaporwave styled */
    --button-bg: #1a1a3e;
    --button-bg-hover: #252545;
    --button-text: #b0b0b0;
    --button-border: #3a3a5e;

    /* Active/selected state - Cyan glow */
    --active-bg: #00F5FF;           /* Cyan */
    --active-text: #0a0a1a;         /* Dark text on cyan */
    --active-border: #00F5FF;

    /* Control colors */
    --control-bg: #1a1a3e;
    --control-border: #3a3a5e;
    --control-focus: #00F5FF;       /* Cyan focus */

    /* Input colors */
    --input-bg: #252545;
    --input-border: #3a3a5e;
    --input-focus-border: #00F5FF;  /* Cyan focus */
    --input-text: #e0e0e0;
}

/* Add subtle vaporwave glow effects to active elements */
.tab.active,
.menu-item.active {
    box-shadow: 0 0 10px rgba(0, 245, 255, 0.3);
}

button:hover,
.theme-btn:hover {
    box-shadow: 0 0 8px rgba(255, 106, 213, 0.2);
}

/* Gradient accents for headers */
h1, h2 {
    background: linear-gradient(135deg, #FF6AD5 0%, #B967FF 50%, #00F5FF 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Add subtle grid pattern to body */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 106, 213, 0.05) 1px, transparent 0);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: -1;
}