/**
 * NOT Faction Theme
 * Sisterhood of NOT - Transhuman/Cyberpunk aesthetic
 * Magenta primary, Pink secondary, Deep purple background
 */

:root {
    /* Primary: Magenta - NOT Neon */
    --primary: #FF00FF;
    --primary-dark: #D946EF;
    --primary-glow: rgba(255, 0, 255, 0.4);

    /* Accents */
    --accent-cyan: #EC4899;
    /* Pink - NOT secondary */
    --accent-green: #A855F7;
    /* Purple accent */
    --accent-pink: #A855F7;
    /* Violet - NOT quaternary */

    /* Backgrounds */
    --bg-dark: #1a0a2e;
    /* Deep purple/void */
    --bg-card: rgba(46, 16, 101, 0.4);

    /* Text */
    --text-primary: #fdf4ff;
    --text-secondary: #e879f9;

    /* Glass */
    --glass-border: rgba(255, 0, 255, 0.3);
}

body {
    background: linear-gradient(135deg, #1a0a2e 0%, #2e1065 50%, #1a0a2e 100%);
    font-family: 'Orbitron', 'Outfit', sans-serif;
}

/* Nav with cyberpunk styling */
.nav {
    background: rgba(26, 10, 46, 0.9);
    border-bottom: 2px solid var(--primary);
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.2);
}

.nav-logo {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #FF00FF 0%, #EC4899 50%, #A855F7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(255, 0, 255, 0.5);
    text-decoration: none;
}

.nav-links a {
    color: var(--text-secondary);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary);
    text-shadow: 0 0 15px var(--primary), 0 0 30px var(--primary-glow);
}

/* Scrollbar with neon glow */
::-webkit-scrollbar-track {
    background: #1a0a2e;
}

::-webkit-scrollbar-thumb {
    background: #581c87;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
}

/* Page title with NOT gradient */
.page-title {
    background: linear-gradient(to bottom, #FF00FF, #EC4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Footer */
.footer {
    background: linear-gradient(to bottom, transparent, rgba(255, 0, 255, 0.08));
    border-top: 1px solid var(--glass-border);
}

/* Cards with cyberpunk glow */
.character-card,
.faction-card,
.result-item {
    border: 1px solid rgba(255, 0, 255, 0.3);
}

.character-card:hover,
.faction-card:hover,
.result-item:hover {
    border-color: var(--primary);
    box-shadow:
        0 0 20px rgba(255, 0, 255, 0.3),
        0 0 40px rgba(236, 72, 153, 0.2),
        inset 0 0 20px rgba(255, 0, 255, 0.05);
}

/* Extra cyberpunk effects */
.nav-links a:hover,
.nav-links a.active {
    text-shadow:
        0 0 10px var(--primary),
        0 0 20px var(--primary);
}

/* Text Colors */
body {
    color: var(--text-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary);
}

/* Cyberpunk gradient headings with glow (excludes branding page) */
h1:not(.faction-title),
h2:not(.faction-title) {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent-cyan) 50%, var(--accent-pink) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px var(--primary-glow));
}

/* Body text inherits from body color, specific classes can override */

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    color: var(--accent-cyan);
    text-shadow: 0 0 10px var(--accent-cyan);
}

/* Section titles */
.section-title,
.explore-section h2,
.homepage-section h2 {
    color: var(--text-primary);
}

/* Card text */
.card,
.character-card,
.faction-card {
    color: var(--text-primary);
}

.card .file-id,
.file-entry .file-id {
    color: var(--primary);
    text-shadow: 0 0 8px var(--primary-glow);
}

.card .file-meta,
.file-entry .file-meta {
    color: var(--text-secondary);
}

/* Footer */
.footer {
    color: var(--text-secondary);
}

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

.footer a:hover {
    color: var(--primary);
    text-shadow: 0 0 10px var(--primary);
}

.copyright {
    color: var(--text-secondary);
}