/* DeepDrft Global Styles - Aesthetic and Structural Classes */

/* === AESTHETIC STYLES (Reusable across components) === */

/* Color Variables - Aligned with MudBlazor Theme */
:root {
    /* Main DeepDrft Colors */
    --deepdrft-primary: #8A2BE2;        /* BlueViolet - Primary brand color */
    --deepdrft-secondary: #FF1493;      /* DeepPink - Secondary brand color */
    --deepdrft-tertiary: #4B0082;       /* Indigo - Deep accent color */
    --deepdrft-accent: #9370DB;         /* MediumPurple - Light accent */
    
    /* Surface Colors */
    --deepdrft-surface: rgba(255, 255, 255, 1);
    --deepdrft-surface-alpha: rgba(255, 255, 255, 0.9);
    
    /* Theme-aware Variables (Light Mode Default) */
    --deepdrft-theme-primary: var(--deepdrft-primary);
    --deepdrft-theme-secondary: var(--deepdrft-secondary);
    --deepdrft-theme-tertiary: var(--deepdrft-tertiary);
    --deepdrft-theme-info: var(--deepdrft-accent);

    /* Font Hierarchy - DRY font definitions */
    --deepdrft-font-largest-headers: "Audiowide", sans-serif;     /* h1, hero text, main titles */
    --deepdrft-font-headers: "Michroma", sans-serif;              /* h2-h6, visual components, buttons */
    --deepdrft-font-body: "Electrolize", sans-serif;              /* body text, paragraphs, smaller elements */
}

/* Dark Mode Variables */
[data-theme="dark"], .mud-theme-dark {
    --deepdrft-theme-primary: #FF1493;     /* DeepPink for dark mode */
    --deepdrft-theme-secondary: #8A2BE2;   /* BlueViolet for dark mode */
    --deepdrft-theme-tertiary: #9370DB;    /* MediumPurple for dark mode */
    --deepdrft-theme-info: #4B0082;        /* Indigo for dark mode */
}

/* Primary Gradient Backgrounds */
.deepdrft-gradient-primary {
    background: linear-gradient(135deg, #8A2BE2 0%, #FF1493 50%, #4B0082 100%);
}

.deepdrft-gradient-hero {
    background: linear-gradient(135deg, #8A2BE2 0%, #FF1493 50%, #4B0082 100%);
}

.deepdrft-gradient-soft-primary {
    background: linear-gradient(45deg, rgba(138,43,226,0.1) 0%, rgba(255,20,147,0.1) 100%);
}

.deepdrft-gradient-soft-secondary {
    background: linear-gradient(45deg, rgba(75,0,130,0.1) 0%, rgba(138,43,226,0.1) 100%);
}

.deepdrft-gradient-soft-accent {
    background: linear-gradient(135deg, rgba(138,43,226,0.1) 0%, rgba(75,0,130,0.1) 100%);
}

.deepdrft-gradient-soft-tertiary {
    background: linear-gradient(135deg, rgba(255,20,147,0.1) 0%, rgba(138,43,226,0.1) 100%);
}

.deepdrft-gradient-features {
    background: linear-gradient(to right, rgba(138,43,226,0.05) 0%, rgba(255,20,147,0.05) 100%);
}

/* Font Hierarchy Styles - DRY Typography System */

/* Largest Headers - Turret Road */
h1, .deepdrft-text-hero, .deepdrft-heading-primary {
    font-family: var(--deepdrft-font-largest-headers);
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.deepdrft-text-hero {
    font-size: clamp(2rem, 8vw, 4rem);
}

/* Headers and Visual Components - Michroma */
h2, h3, h4, h5, h6, 
.deepdrft-heading-secondary, 
.deepdrft-text-subtitle, 
.deepdrft-button-text,
.deepdrft-nav-text,
.deepdrft-visual-text {
    font-family: var(--deepdrft-font-headers);
}

.deepdrft-text-subtitle {
    font-weight: 300;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Body Text and Smaller Elements - Electrolize */
body, p, span, div, 
.deepdrft-text-body,
.deepdrft-text-description, 
.deepdrft-text-readable,
.deepdrft-small-text {
    font-family: var(--deepdrft-font-body);
}

.deepdrft-text-description {
    font-weight: 400;
    opacity: 0.9;
}

.deepdrft-text-bold {
    font-weight: bold;
}

.deepdrft-text-readable {
    line-height: 1.6;
}

/* MudBlazor Component Overrides - Apply font hierarchy to MudBlazor components */
.mud-typography-h1 {
    font-family: var(--deepdrft-font-largest-headers) !important;
}

.mud-typography-h2, .mud-typography-h3, .mud-typography-h4, 
.mud-typography-h5, .mud-typography-h6,
.mud-button-text, .mud-navlink-text, .mud-appbar-content {
    font-family: var(--deepdrft-font-headers) !important;
}

.mud-typography-body1, .mud-typography-body2, 
.mud-typography-caption, .mud-typography-overline,
.mud-input-text, .mud-select-text, .mud-form-label {
    font-family: var(--deepdrft-font-body) !important;
}

/* Border Accents */
.deepdrft-border-left-primary {
    border-left: 4px solid #FF1493;
}

.deepdrft-border-left-secondary {
    border-left: 4px solid #8A2BE2;
}

.deepdrft-border-top-primary {
    border-top: 4px solid #8A2BE2;
}

.deepdrft-border-top-secondary {
    border-top: 4px solid #FF1493;
}

/* Buttons */
.deepdrft-button-primary {
    color: #8A2BE2;
    font-weight: bold;
    padding: 10px 24px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.deepdrft-button-outlined {
    border: 2px solid rgba(255,255,255,0.8);
}

.deepdrft-button-spaced {
    margin: 8px;
}

/* Card Aesthetics */
.deepdrft-card-purple-tint {
    background: rgba(138,43,226,0.1);
}

.deepdrft-card-pink-tint {
    background: rgba(255,20,147,0.1);
}

.deepdrft-card-indigo-tint {
    background: rgba(75,0,130,0.1);
}

.deepdrft-card-lavender-tint {
    background: rgba(147,112,219,0.1);
}

/* Track Card Specific */
.deepdrft-track-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.7);
}

.deepdrft-track-card-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
}

.deepdrft-genre-chip {
    opacity: 0.9;
    margin-top: 4px;
}

.deepdrft-chip-spacing {
    margin: 2px;
}

/* Icons */
.deepdrft-icon-large {
    font-size: 3rem;
}

/* === STRUCTURAL STYLES (Layout and positioning) === */

/* Hero Section Layout */
.deepdrft-hero-container {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.deepdrft-hero-text-container {
    max-width: 600px;
    margin: 0 auto;
}

/* Feature Cards Layout */
.deepdrft-feature-card {
    height: 100%;
}

.deepdrft-feature-icon-container {
    text-align: center;
}

/* About Section Layout */
.deepdrft-about-card {
    height: 100%;
}

/* CTA Section Layout */
.deepdrft-cta-container {
    border-radius: 16px;
    text-align: center;
}

.deepdrft-cta-buttons {
    margin-bottom: 16px;
}

/* Track Card Layout */
.deepdrft-track-card-container {
    width: 250px;
    height: 250px;
    min-width: 250px;
    position: relative;
    overflow: hidden;
}

.deepdrft-track-card-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.deepdrft-track-info-top {
    /* Used for track name and artist at top */
}

.deepdrft-track-info-middle {
    margin: 8px 0;
    /* Used for album and genre in middle */
}

.deepdrft-track-info-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Used for year and play button at bottom */
}

.deepdrft-track-gallery-item-center {
    display: flex;
    justify-content: center;
}


/* Layout with overlay audio player - Global layout class */
/*.deepdrft-layout-with-overlay-player {*/
/*    position: relative;*/
/*    min-height: calc(100vh - 64px);*/
/*    padding-bottom: 160px; !* Increased space for overlay player *!*/
/*}*/

/*!* Audio player overlay positioning - Global positioning *!*/
/*.deepdrft-layout-with-overlay-player > .AudioPlayerBar,*/
/*.deepdrft-layout-with-overlay-player > *:last-child {*/
/*    position: fixed;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    z-index: 1000;*/
/*    pointer-events: none;*/
/*}*/

/*.deepdrft-layout-with-overlay-player > *:last-child > * {*/
/*    pointer-events: auto;*/
/*}*/

/* Responsive Utilities */
@media (max-width: 768px) {
    .deepdrft-hero-text {
        font-size: clamp(1.5rem, 6vw, 3rem) !important;
    }
    
    .deepdrft-cta-buttons .mud-button {
        margin: 4px !important;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .deepdrft-track-card-container {
        min-width: 200px;
        width: 200px;
        height: 200px;
    }
}