/* ============================================
   RAWRVILLE - Colour System
   ============================================
   
   Two modes:
   - .primary   = Dark with purple accent
   - .secondary = Dark with electric blue accent
   
   ============================================ */

:root {
    /* Dark palette (purple undertones) */
    --color-void: #12101a;
    --color-obsidian: #1e1b2e;
    --color-dusk: #2d2841;
    
    /* Dark palette (cool/blue undertones) */
    --color-abyss: #0d1117;
    --color-depth: #161b22;
    --color-steel: #21262d;
    
    /* Mid tones */
    --color-slate: #5c5477;
    --color-mist: #8a82a3;
    --color-fog: #8b949e;
    
    /* Light palette */
    --color-cloud: #c9d1d9;
    --color-pearl: #f0f6fc;
    
    /* Primary accent - electric purple */
    --color-spark: #7c5cff;
    --color-spark-light: #9b82ff;
    --color-spark-dark: #6344e0;
    --color-spark-glow: rgba(124, 92, 255, 0.4);
    
    /* Secondary accent - electric blue */
    --color-bolt: #58a6ff;
    --color-bolt-light: #79b8ff;
    --color-bolt-dark: #388bfd;
    --color-bolt-glow: rgba(88, 166, 255, 0.4);
    
    /* Warm accent */
    --color-flare: #ff6b4a;
    --color-flare-light: #ff8a70;
}


/* ============================================
   PRIMARY - Dark with purple accent
   ============================================ */
.primary {
    background: var(--color-void);
    color: var(--color-cloud);
}

.primary h1,
.primary h2,
.primary h3,
.primary h4 {
    color: var(--color-pearl);
}

.primary a {
    color: var(--color-spark-light);
}

	.primary a:hover {
		color: var(--color-flare);
	}

.primary .btn {
    background: var(--color-spark);
    color: var(--color-void);
    box-shadow: 0 4px 30px var(--color-spark-glow);
}

.primary .btn:hover {
    background: var(--color-spark-light);
    color: var(--color-void);
    box-shadow: 0 8px 40px var(--color-spark-glow);
}

.primary .card {
    background: var(--color-obsidian);
    border-color: rgba(124, 92, 255, 0.2);
}

.primary .card:hover {
    border-color: var(--color-spark);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.primary .card h3 {
    color: var(--color-pearl);
}

.primary .card p {
    color: var(--color-mist);
}

/* Primary modifiers */
.primary.with-grid {
    position: relative;
}

.primary.with-grid::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(124, 92, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 92, 255, 0.12) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}

.primary.with-glow {
    position: relative;
    overflow: hidden;
}

.primary.with-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 50% -10%, var(--color-spark-glow) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(255, 107, 74, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse 50% 30% at 10% 80%, rgba(124, 92, 255, 0.2) 0%, transparent 40%);
    pointer-events: none;
}

.primary.accent-glow-top {
    position: relative;
}

	.primary.accent-glow-top::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		background: linear-gradient(90deg, transparent, var(--color-spark), transparent);
		box-shadow: 0 0 30px var(--color-spark-glow), 0 0 60px var(--color-spark-light-glow);
	}

.primary.accent-bar-top {
    position: relative;
}

.primary.accent-bar-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-spark), var(--color-bolt), var(--color-spark));
}


/* ============================================
   SECONDARY - Dark with electric blue accent
   ============================================ */
.secondary {
    background: var(--color-abyss);
    color: var(--color-cloud);
}

.secondary h1,
.secondary h2,
.secondary h3,
.secondary h4 {
    color: var(--color-pearl);
}

.secondary a {
    color: var(--color-bolt);
}

.secondary a:hover {
    color: var(--color-bolt-light);
}

.secondary .btn {
    background: var(--color-bolt);
    color: var(--color-abyss);
    box-shadow: 0 4px 30px var(--color-bolt-glow);
}

.secondary .btn:hover {
    background: var(--color-bolt-light);
    color: var(--color-abyss);
    box-shadow: 0 8px 40px var(--color-bolt-glow);
}

.secondary .card {
    background: var(--color-depth);
    border-color: rgba(88, 166, 255, 0.15);
}

	.secondary .card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 3px;
		background: linear-gradient(90deg, var(--color-bolt), transparent);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 250ms ease;
	}

	.secondary .card:hover {
		border-color: var(--color-bolt);
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
	}

		.secondary .card:hover::before {
			transform: scaleX(1);
		}

	.secondary .card h3 {
		color: var(--color-bolt);
	}

	.secondary .card p {
		color: var(--color-fog);
	}

/* Secondary modifiers */
.secondary.with-grid {
    position: relative;
}

.secondary.with-grid::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(88, 166, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(88, 166, 255, 0.08) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}

.secondary.accent-glow-top {
    position: relative;
}

	.secondary.accent-glow-top::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		background: linear-gradient(90deg, transparent, var(--color-bolt), transparent);
		box-shadow: 0 0 30px var(--color-bolt-glow), 0 0 60px var(--color-bolt-light-glow);
	}

.secondary.accent-bar-top {
    position: relative;
}

.secondary.accent-bar-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-spark), var(--color-bolt), var(--color-spark));
}


/* ============================================
   UTILITIES
   ============================================ */
.text-glow {
    text-shadow: 0 0 60px var(--color-spark-glow);
}

.text-glow-blue {
    text-shadow: 0 0 60px var(--color-bolt-glow);
}

.highlight {
    color: var(--color-spark);
}

.highlight-blue {
    color: var(--color-bolt);
}