/* ================================================
   THEME: Frazzle - Chaotic Fun
   Bright colours, playful vibes, not taking itself seriously
   ================================================ */

:root {
    /* Core palette - fun and bright */
    --color-bg: #fef9f3;
    --color-bg-alt: #fff5eb;
    --color-bg-card: #ffffff;
    --color-bg-elevated: #ffefd5;
    
    /* Text colours */
    --color-text: #2d2a26;
    --color-text-muted: #6b6560;
    --color-text-bright: #1a1815;
    
    /* Primary accent - fun orange/coral */
    --color-primary: #ff6b35;
    --color-primary-dark: #e55a2b;
    --color-primary-light: #ff8c5a;
    --color-primary-glow: rgba(255, 107, 53, 0.15);
    
    /* Tech accent - electric purple */
    --color-tech: #7c3aed;
    --color-tech-dark: #6d28d9;
    --color-tech-light: #a78bfa;
    --color-tech-glow: rgba(124, 58, 237, 0.12);
    
    /* Music accent - hot pink */
    --color-music: #ec4899;
    --color-music-dark: #db2777;
    --color-music-light: #f472b6;
    --color-music-glow: rgba(236, 72, 153, 0.12);
    
    /* Gradient - party vibes */
    --gradient-blend: linear-gradient(135deg, var(--color-tech) 0%, var(--color-primary) 50%, var(--color-music) 100%);
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-music) 100%);
    
    /* Borders */
    --color-border: #f0e6db;
    --color-border-strong: #e5d9cc;
    
    /* Typography - Fun and bouncy */
    --font-display: 'Fredoka', 'Comic Sans MS', cursive;
    --font-heading: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* Shadows - playful */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.12);
    --shadow-primary: 0 6px 20px rgba(255, 107, 53, 0.25);
    --shadow-tech: 0 6px 20px rgba(124, 58, 237, 0.2);
    --shadow-music: 0 6px 20px rgba(236, 72, 153, 0.2);
    
    /* Theme-specific */
    --header-bg: rgba(254, 249, 243, 0.95);
    --hero-overlay: rgba(254, 249, 243, 0.3);
}

/* Fun header */
.site-header {
    background: var(--header-bg);
    border-bottom: 3px dashed var(--color-primary);
}

.logo-mark {
    background: var(--gradient-blend);
    border-radius: 50%;
    transform: rotate(-5deg);
}

.logo-text {
    color: var(--color-text-bright);
}

.nav-link {
    color: var(--color-text);
    font-weight: 600;
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-primary);
}

/* Wobbly hero name */
.hero-name {
    font-family: var(--font-display);
    font-weight: 600;
    background: var(--gradient-blend);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: rotate(-1deg);
}

.hero-intro {
    color: var(--color-primary);
    font-weight: 700;
}

.hero-tagline {
    color: var(--color-text);
}

/* Fun backgrounds */
.hero-bg::before {
    background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.08), transparent 50%);
}

.hero-bg::after {
    background: radial-gradient(ellipse at center, rgba(236, 72, 153, 0.08), transparent 50%);
}

.hero-grid {
    background-image: 
        radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.3;
}

/* Bouncy cards */
.world-card {
    border-radius: 24px;
    border: 3px solid var(--color-border);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.world-card:hover {
    transform: translateY(-8px) rotate(1deg);
}

.world-card--tech {
    border-color: var(--color-tech-light);
}

.world-card--tech:hover {
    box-shadow: var(--shadow-tech);
}

.world-card--music {
    border-color: var(--color-music-light);
}

.world-card--music:hover {
    box-shadow: var(--shadow-music);
}

.world-card::before {
    height: 6px;
    border-radius: 24px 24px 0 0;
}

.world-card--tech::before {
    background: var(--color-tech);
}

.world-card--music::before {
    background: var(--color-music);
}

.world-icon {
    border-radius: 50%;
}

.world-icon--tech {
    background: var(--color-tech-glow);
    color: var(--color-tech);
}

.world-icon--music {
    background: var(--color-music-glow);
    color: var(--color-music);
}

/* Buttons - pill shaped and fun */
.btn {
    border-radius: 100px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
}

.btn-primary {
    background: var(--gradient-blend);
    box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

.btn-outline {
    border: 2px solid var(--color-text);
    color: var(--color-text);
}

.btn-outline:hover {
    background: var(--color-text);
    color: var(--color-bg);
}

.btn-tech {
    background: var(--color-tech);
}

.btn-music {
    background: var(--color-music);
}

/* Role tags */
.role-tag {
    border-radius: 100px;
    font-weight: 700;
    border-width: 2px;
}

.role-tag--tech {
    border-color: var(--color-tech);
    color: var(--color-tech);
    background: var(--color-tech-glow);
}

.role-tag--music {
    border-color: var(--color-music);
    color: var(--color-music);
    background: var(--color-music-glow);
}

/* Section labels */
.section-label {
    font-weight: 800;
    text-transform: uppercase;
}

.section-label--tech {
    color: var(--color-tech);
}

.section-label--music {
    color: var(--color-music);
}

/* Expertise cards */
.expertise-card {
    border-radius: 20px;
    border: 2px solid var(--color-border);
}

.expertise-card:hover {
    border-color: var(--color-tech);
    transform: translateY(-4px);
}

.expertise-icon {
    color: var(--color-tech);
}

.tech-badge {
    background: var(--color-tech-glow);
    color: var(--color-tech);
    border-radius: 100px;
    font-weight: 600;
}

/* Band cards */
.band-card {
    border-radius: 20px;
    border: 2px solid var(--color-border);
}

.band-card:hover {
    border-color: var(--color-music);
    transform: translateY(-4px);
}

.band-genre {
    color: var(--color-music);
    font-weight: 700;
}

/* Page headers - fun angles */
.page-header {
    background: var(--color-bg-alt);
    border-bottom: 4px solid var(--color-primary);
}

.page-header--tech {
    border-bottom-color: var(--color-tech);
}

.page-header--music {
    border-bottom-color: var(--color-music);
}

/* Footer */
.site-footer {
    background: var(--color-bg-alt);
    border-top: 3px dashed var(--color-border-strong);
}

.footer-logo {
    font-family: var(--font-display);
    color: var(--color-primary);
}

/* Contact form */
.contact-form {
    border-radius: 24px;
    border: 3px solid var(--color-border);
}

.form-input,
.form-textarea {
    border-radius: 12px;
    border: 2px solid var(--color-border);
}

.form-input:focus,
.form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-glow);
}

/* Fun hover states for links */
.world-link--tech {
    color: var(--color-tech);
}

.world-link--music {
    color: var(--color-music);
}

/* Social links */
.social-link {
    border-radius: 50%;
}

.social-link:hover {
    background: var(--color-primary-glow);
    color: var(--color-primary);
    transform: scale(1.1) rotate(5deg);
}