Front End Work

- Home Page
 - Custom Site Styles & Mud Theme Adjustments

DeepDrftWeb.Client/Controls/AudioPlayerBar.razor

@@ -15,7 +15,7 @@
                                    Disabled="!IsLoaded"/>    
                 }
             </MudStack>
-            <MudText Typo="Typo.body2" Class="font-monospace" Style="min-width: 120px">
+            <MudText Typo="Typo.body2" Class="font-monospace deepdrft-audio-time">
                 @FormatTime(CurrentTime) / @FormatTime(Duration)
             </MudText>
         </MudStack>
@@ -27,17 +27,17 @@
                    Value="@CurrentTime"
                    ValueChanged="@OnSeek"
                    Disabled="!IsLoaded"
-                   Style="flex: 1; margin-right: 8px;"/>
+                   Class="deepdrft-audio-slider-seek"/>
 
-        <div style="display: flex; align-items: center; width: 140px;">
+        <div class="deepdrft-audio-controls">
-            <MudIcon Icon="@GetVolumeIcon()" Style="margin-right: 4px;"/>
+            <MudIcon Icon="@GetVolumeIcon()" Class="deepdrft-audio-volume-icon"/>
             <MudSlider T="double"
                        Min="0"
                        Max="1"
                        Step="0.01"
                        Value="@Volume"
                        ValueChanged="@OnVolumeChange"
-                       Style="flex: 1;"/>
+                       Class="deepdrft-audio-slider"/>
         </div>
     </MudStack>
     @if (!string.IsNullOrEmpty(ErrorMessage))

DeepDrftWeb.Client/Controls/TrackCard.razor

@@ -1,42 +1,35 @@
-<MudCard Style="width: 250px; height: 250px; position: relative; overflow: hidden;"
+<MudCard Class="deepdrft-track-card-container"
          Elevation="4">
     
     @if (!string.IsNullOrEmpty(TrackModel?.ImagePath))
     {
-        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
+        <div class="deepdrft-track-card-bg" style="background-image: url('@TrackModel.ImagePath');">
-                    background-image: url('@TrackModel.ImagePath'); 
-                    background-size: cover; 
-                    background-position: center;
-                    filter: brightness(0.7);">
         </div>
     }
     else
     {
-        <MudPaper Style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+        <MudPaper Class="deepdrft-track-card-fallback mud-theme-secondary"
-                  Class="mud-theme-secondary"
                   Elevation="0">
         </MudPaper>
     }
     
-    <MudCardContent Style="position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 16px;">
+    <MudCardContent Class="deepdrft-track-card-content">
         
-        <div>
+        <div class="deepdrft-track-info-top">
             <MudText Typo="Typo.h6" 
                      Color="Color.Surface"
-                     Style="margin-bottom: 4px;"
+                     Class="text-truncate mb-1">
-                     Class="text-truncate">
                 @TrackModel?.TrackName
             </MudText>
             
             <MudText Typo="Typo.subtitle1" 
                      Color="Color.Surface"
-                     Style="margin-bottom: 8px;"
+                     Class="text-truncate mb-2">
-                     Class="text-truncate">
                 @TrackModel?.Artist
             </MudText>
         </div>
         
-        <div Style="margin: 8px 0;">
+        <div class="deepdrft-track-info-middle">
             @if (!string.IsNullOrEmpty(TrackModel?.Album))
             {
                 <MudText Typo="Typo.caption" 
@@ -52,13 +45,13 @@
                          Size="Size.Small" 
                          Variant="Variant.Filled" 
                          Color="Color.Primary"
-                         Style="opacity: 0.9; margin-top: 4px;">
+                         Class="deepdrft-genre-chip">
                     @TrackModel.Genre
                 </MudChip>
             }
         </div>
         
-        <div Style="display: flex; justify-content: space-between; align-items: center;">
+        <div class="deepdrft-track-info-bottom">
             @if (TrackModel?.ReleaseDate.HasValue == true)
             {
                 <MudText Typo="Typo.caption" 

DeepDrftWeb.Client/Controls/TracksGallery.razor

@@ -3,7 +3,7 @@
         @foreach (var track in Tracks)
         {
             <MudItem xs="12" sm="6" md="4" lg="2" xl="2">
-                <div Style="display: flex; justify-content: center;">
+                <div class="deepdrft-track-gallery-item-center">
                     <TrackCard TrackModel="@track" IsPlaying="@(track.Id == SelectedTrack?.Id)" OnPlay="@HandlePlayClick"/>
                 </div>
             </MudItem>

DeepDrftWeb.Client/Layout/MainLayout.razor

@@ -74,10 +74,10 @@
 
     private readonly PaletteLight _lightPalette = new()
     {
-        Primary = "#9370DB",           // MediumPurple - stronger but still pastel
+        Primary = "#8A2BE2",           // BlueViolet - main DeepDrft purple
-        Secondary = "#F4A460",         // SandyBrown - warm pastel orange
+        Secondary = "#FF1493",         // DeepPink - main DeepDrft pink
-        Tertiary = "#FF1493",          // DeepPink - vibrant accent (kept neon)
+        Tertiary = "#4B0082",          // Indigo - DeepDrft deep purple
-        Info = "#8A2BE2",             // BlueViolet - stronger purple info
+        Info = "#9370DB",             // MediumPurple - DeepDrft accent purple
         Success = "#98FB98",          // PaleGreen - soft success
         Warning = "#FFEAA7",          // Light peach - soft warning
         Error = "#FFB6C1",            // LightPink - soft error
@@ -86,35 +86,35 @@
         Surface = "#FFFAF0",          // FloralWhite - creamy surface
         Background = "#FAF0E6",       // Linen - warm cream background
         AppbarText = "#2F2F2F",       // Dark text on light appbar
-        AppbarBackground = "rgba(211,180,221,0.90)", // Translucent plum - more presence
+        AppbarBackground = "rgba(138,43,226,0.85)", // Translucent DeepDrft primary
-        DrawerBackground = "#D3B4DD", // Plum drawer - stronger presence
+        DrawerBackground = "rgba(138,43,226,0.1)", // Very light DeepDrft primary
         TextPrimary = "#2F2F2F",      // Dark primary text
         TextSecondary = "#6B6B6B",    // Medium gray secondary text
-        GrayLight = "#E6E6FA",        // Lavender - light purple-tinted gray
+        GrayLight = "rgba(138,43,226,0.1)",        // Light DeepDrft tint
-        GrayLighter = "#F8F8FF",      // GhostWhite - very light purple-tinted
+        GrayLighter = "rgba(138,43,226,0.05)",     // Very light DeepDrft tint
-        GrayDefault = "#BC8F8F",      // RosyBrown - warm gray
+        GrayDefault = "rgba(138,43,226,0.2)",      // Medium DeepDrft tint
-        GrayDark = "#8B4513",         // SaddleBrown - warm dark gray
+        GrayDark = "rgba(138,43,226,0.4)",         // Darker DeepDrft tint
-        Divider = "#E6E6FA",          // Lavender - soft purple divider lines
+        Divider = "rgba(138,43,226,0.15)",         // Soft DeepDrft divider lines
-        TableLines = "#E6E6FA",       // Lavender - soft table lines
+        TableLines = "rgba(138,43,226,0.15)",      // Soft DeepDrft table lines
     };
 
     private readonly PaletteDark _darkPalette = new()
     {
-        Primary = "#FF69B4",          // HotPink - softer magenta for dark mode
+        Primary = "#FF1493",          // DeepPink - main DeepDrft pink for dark mode
-        Secondary = "#4B0082",        // Indigo - deep purple from logo
+        Secondary = "#8A2BE2",        // BlueViolet - main DeepDrft purple
-        Tertiary = "#8A2BE2",         // BlueViolet - purple accent instead of blue
+        Tertiary = "#9370DB",         // MediumPurple - DeepDrft accent
-        Info = "#9370DB",            // MediumPurple - purple info instead of blue
+        Info = "#4B0082",            // Indigo - DeepDrft deep purple
         Success = "#00FF7F",         // SpringGreen - bright success
         Warning = "#FFD700",         // Gold - warning color
         Error = "#FF6347",           // Tomato - error color
         Black = "#000000",           // Pure black
         White = "#FFFFFF",           // Pure white
-        Surface = "#2D1B4E",         // Dark purple - surface with purple tint
+        Surface = "rgba(75,0,130,0.2)",         // Dark DeepDrft indigo tint
-        Background = "#0D0D0D",      // Near black - very dark background
+        Background = "#0A0A0A",      // Very dark background
         BackgroundGray = "#1A1A1A",  // Very dark gray
         AppbarText = "#FFFFFF",      // White text on dark appbar
-        AppbarBackground = "rgba(45,27,78,0.95)", // Translucent dark purple
+        AppbarBackground = "rgba(75,0,130,0.95)", // Translucent DeepDrft indigo
-        DrawerBackground = "#2D1B4E", // Dark purple drawer
+        DrawerBackground = "rgba(75,0,130,0.15)", // Dark DeepDrft indigo tint
         DrawerIcon = "#E0E0E0",      // Light gray icons
         DrawerText = "#E0E0E0",      // Light gray drawer text
         ActionDefault = "#BDBDBD",   // Light gray for actions
@@ -123,13 +123,13 @@
         TextPrimary = "#FFFFFF",     // White primary text
         TextSecondary = "#E0E0E0",   // Light gray secondary text
         TextDisabled = "#757575",    // Disabled text
-        GrayLight = "#424242",       // Light gray in dark mode
+        GrayLight = "rgba(255,20,147,0.15)",       // Light DeepDrft pink tint
-        GrayLighter = "#2F2F2F",     // Lighter gray in dark mode
+        GrayLighter = "rgba(255,20,147,0.08)",     // Lighter DeepDrft pink tint
-        GrayDefault = "#757575",     // Default gray
+        GrayDefault = "rgba(255,20,147,0.25)",     // Default DeepDrft pink tint
-        GrayDark = "#BDBDBD",        // Dark gray (inverted for dark mode)
+        GrayDark = "rgba(255,20,147,0.4)",        // Darker DeepDrft pink tint
-        Divider = "#424242",         // Medium gray divider lines
+        Divider = "rgba(255,20,147,0.2)",         // DeepDrft pink divider lines
-        LinesDefault = "#424242",    // Default lines
+        LinesDefault = "rgba(255,20,147,0.2)",    // DeepDrft pink lines
-        TableLines = "#424242",      // Table lines
+        TableLines = "rgba(255,20,147,0.2)",      // DeepDrft pink table lines
         OverlayLight = "rgba(0,0,0,0.7)", // Dark overlay
         OverlayDark = "rgba(255,255,255,0.1)", // Light overlay for dark mode
     };

DeepDrftWeb.Client/Layout/NavMenu.razor

@@ -1,8 +1,7 @@
 @using DeepDrftWeb.Client.Controls
 
 <AppNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</AppNavLink>
-<AppNavLink Href="/tracks" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.BrowseGallery">Track Gallery</AppNavLink>
+<AppNavLink Href="/tracks" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.LibraryMusic">Track Gallery</AppNavLink>
-<AppNavLink Href="/audio-example" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.LibraryMusic">Audio Test</AppNavLink>
 
 
 

DeepDrftWeb.Client/Pages/Home.razor

@@ -1,4 +1,225 @@
 @page "/"
 
-<PageTitle>Deep Drft Home</PageTitle>
+<PageTitle>DeepDrft - Electronic Music Collective</PageTitle>
+
+<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pa-0">
+    
+    @* Hero Section *@
+    <MudPaper Elevation="0" Class="pa-8 mb-6 text-center deepdrft-gradient-hero deepdrft-hero-container">
+        
+        <MudGrid Justify="Justify.Center" AlignItems="Center">
+            <MudItem xs="12" md="8">
+                <MudText Typo="Typo.h1" Color="Color.Surface" 
+                         Class="mb-4 deepdrft-text-hero">
+                    DEEPDRFT
+                </MudText>
+                
+                <MudText Typo="Typo.h4" Color="Color.Surface" 
+                         Class="mb-6 deepdrft-text-subtitle">
+                    ELECTRONIC MUSIC COLLECTIVE
+                </MudText>
+                
+                <MudText Typo="Typo.h6" Color="Color.Surface" 
+                         Class="mb-8 deepdrft-text-description deepdrft-hero-text-container">
+                    Live electronic music from Charleston, SC featuring house, techno, trance, and IDM crafted with synthesizers and grooveboxes
+                </MudText>
+                
+                <MudButton Variant="Variant.Filled" 
+                           Color="Color.Surface" 
+                           Size="Size.Large" 
+                           Class="mr-4 mb-2 deepdrft-button-primary">
+                    <MudIcon Icon="@Icons.Material.Filled.PlayArrow" Class="mr-2" />
+                    START STREAMING
+                </MudButton>
+                
+                <MudButton Variant="Variant.Outlined" 
+                           Color="Color.Surface" 
+                           Size="Size.Large"
+                           Class="mb-2 deepdrft-button-outlined">
+                    <MudIcon Icon="@Icons.Material.Filled.LibraryMusic" Class="mr-2" />
+                    BROWSE TRACKS
+                </MudButton>
+            </MudItem>
+        </MudGrid>
+    </MudPaper>
+
+    @* About Section *@
+    <MudGrid Class="mb-8" Spacing="6">
+        <MudItem xs="12" md="6">
+            <MudPaper Elevation="4" Class="pa-6 deepdrft-gradient-soft-primary deepdrft-border-left-primary deepdrft-about-card">
+                <MudText Typo="Typo.h4" Color="Color.Primary" Class="mb-4 deepdrft-text-bold">
+                    <MudIcon Icon="@Icons.Material.Filled.Group" Class="mr-2" />
+                    The Collective
+                </MudText>
+                <MudText Typo="Typo.body1" Class="mb-4 deepdrft-text-readable">
+                    DeepDrft is a two-member electronic music collective based in Charleston, South Carolina. 
+                    We create immersive soundscapes that blend the energy of underground club culture with 
+                    the precision of live electronic performance.
+                </MudText>
+                <MudText Typo="Typo.body1" Class="deepdrft-text-readable">
+                    Using an arsenal of synthesizers, drum machines, and grooveboxes, we craft dynamic live 
+                    performances that span house, techno, trance, and intelligent dance music (IDM). 
+                    Every session is a journey through sound and rhythm.
+                </MudText>
+            </MudPaper>
+        </MudItem>
+        
+        <MudItem xs="12" md="6">
+            <MudPaper Elevation="4" Class="pa-6 deepdrft-gradient-soft-secondary deepdrft-border-left-secondary deepdrft-about-card">
+                <MudText Typo="Typo.h4" Color="Color.Secondary" Class="mb-4 deepdrft-text-bold">
+                    <MudIcon Icon="@Icons.Material.Filled.MusicNote" Class="mr-2" />
+                    Our Sound
+                </MudText>
+                <MudChipSet T="string" Class="mb-4">
+                    <MudChip Color="Color.Primary" Class="deepdrft-chip-spacing">House</MudChip>
+                    <MudChip Color="Color.Secondary" Class="deepdrft-chip-spacing">Techno</MudChip>
+                    <MudChip Color="Color.Tertiary" Class="deepdrft-chip-spacing">Trance</MudChip>
+                    <MudChip Color="Color.Info" Class="deepdrft-chip-spacing">IDM</MudChip>
+                    <MudChip Color="Color.Primary" Variant="Variant.Outlined" Class="deepdrft-chip-spacing">Progressive</MudChip>
+                    <MudChip Color="Color.Secondary" Variant="Variant.Outlined" Class="deepdrft-chip-spacing">Ambient</MudChip>
+                </MudChipSet>
+                <MudText Typo="Typo.body1" Class="deepdrft-text-readable">
+                    From deep, driving basslines to ethereal atmospheric textures, our music explores the 
+                    full spectrum of electronic expression. We believe in the power of live performance 
+                    to create unique, unrepeatable moments that connect artist and audience through rhythm and melody.
+                </MudText>
+            </MudPaper>
+        </MudItem>
+    </MudGrid>
+
+    @* Features Section *@
+    <MudPaper Elevation="2" Class="pa-8 mb-8 deepdrft-gradient-features">
+        <MudText Typo="Typo.h3" Align="Align.Center" Color="Color.Primary" Class="mb-8 deepdrft-text-bold">
+            Experience DeepDrft
+        </MudText>
+        
+        <MudGrid Spacing="6">
+            <MudItem xs="12" sm="6" md="3">
+                <MudCard Elevation="8" Class="pa-4 deepdrft-feature-card deepdrft-feature-icon-container deepdrft-card-purple-tint">
+                    <MudIcon Icon="@Icons.Material.Filled.Headphones" 
+                             Size="Size.Large" 
+                             Color="Color.Primary" 
+                             Class="mb-3 deepdrft-icon-large" />
+                    <MudText Typo="Typo.h6" Color="Color.Primary" Class="mb-2 deepdrft-text-bold">
+                        High-Quality Streaming
+                    </MudText>
+                    <MudText Typo="Typo.body2">
+                        Crystal-clear audio streaming with lossless quality for the best listening experience
+                    </MudText>
+                </MudCard>
+            </MudItem>
+            
+            <MudItem xs="12" sm="6" md="3">
+                <MudCard Elevation="8" Class="pa-4 deepdrft-feature-card deepdrft-feature-icon-container deepdrft-card-pink-tint">
+                    <MudIcon Icon="@Icons.Material.Filled.LiveTv" 
+                             Size="Size.Large" 
+                             Color="Color.Tertiary" 
+                             Class="mb-3 deepdrft-icon-large" />
+                    <MudText Typo="Typo.h6" Color="Color.Tertiary" Class="mb-2 deepdrft-text-bold">
+                        Live Sessions
+                    </MudText>
+                    <MudText Typo="Typo.body2">
+                        Join us for live streaming sessions and experience electronic music as it's created
+                    </MudText>
+                </MudCard>
+            </MudItem>
+            
+            <MudItem xs="12" sm="6" md="3">
+                <MudCard Elevation="8" Class="pa-4 deepdrft-feature-card deepdrft-feature-icon-container deepdrft-card-indigo-tint">
+                    <MudIcon Icon="@Icons.Material.Filled.VideoLibrary" 
+                             Size="Size.Large" 
+                             Color="Color.Secondary" 
+                             Class="mb-3 deepdrft-icon-large" />
+                    <MudText Typo="Typo.h6" Color="Color.Secondary" Class="mb-2 deepdrft-text-bold">
+                        Video Content
+                    </MudText>
+                    <MudText Typo="Typo.body2">
+                        Watch behind-the-scenes content and live performance videos (coming soon)
+                    </MudText>
+                </MudCard>
+            </MudItem>
+            
+            <MudItem xs="12" sm="6" md="3">
+                <MudCard Elevation="8" Class="pa-4 deepdrft-feature-card deepdrft-feature-icon-container deepdrft-card-lavender-tint">
+                    <MudIcon Icon="@Icons.Material.Filled.Archive" 
+                             Size="Size.Large" 
+                             Color="Color.Info" 
+                             Class="mb-3 deepdrft-icon-large" />
+                    <MudText Typo="Typo.h6" Color="Color.Info" Class="mb-2 deepdrft-text-bold">
+                        Growing Archive
+                    </MudText>
+                    <MudText Typo="Typo.body2">
+                        Explore our expanding collection of tracks, mixes, and live recordings
+                    </MudText>
+                </MudCard>
+            </MudItem>
+        </MudGrid>
+    </MudPaper>
+
+    @* Location & Connect Section *@
+    <MudGrid Class="mb-8" Spacing="6">
+        <MudItem xs="12" md="6">
+            <MudPaper Elevation="4" Class="pa-6 deepdrft-gradient-soft-accent deepdrft-border-top-primary">
+                <MudText Typo="Typo.h4" Color="Color.Primary" Class="mb-4 deepdrft-text-bold">
+                    <MudIcon Icon="@Icons.Material.Filled.LocationOn" Class="mr-2" />
+                    Charleston, SC
+                </MudText>
+                <MudText Typo="Typo.body1" Class="mb-4 deepdrft-text-readable">
+                    Based in the vibrant music scene of Charleston, South Carolina, DeepDrft draws inspiration 
+                    from both the city's rich cultural heritage and the cutting-edge sounds of global electronic music.
+                </MudText>
+                <MudText Typo="Typo.body1" Class="deepdrft-text-readable">
+                    The Holy City's unique blend of tradition and innovation provides the perfect backdrop 
+                    for our electronic explorations, where historic charm meets futuristic beats.
+                </MudText>
+            </MudPaper>
+        </MudItem>
+        
+        <MudItem xs="12" md="6">
+            <MudPaper Elevation="4" Class="pa-6 deepdrft-gradient-soft-tertiary deepdrft-border-top-secondary">
+                <MudText Typo="Typo.h4" Color="Color.Tertiary" Class="mb-4 deepdrft-text-bold">
+                    <MudIcon Icon="@Icons.Material.Filled.ConnectWithoutContact" Class="mr-2" />
+                    Connect With Us
+                </MudText>
+                <MudText Typo="Typo.body1" Class="mb-4 deepdrft-text-readable">
+                    Stay connected with DeepDrft for the latest releases, live session announcements, 
+                    and updates from our studio in Charleston.
+                </MudText>
+                <MudButtonGroup Variant="Variant.Outlined" Class="mb-2">
+                    <MudButton StartIcon="@Icons.Material.Filled.Email" Color="Color.Primary">
+                        Newsletter
+                    </MudButton>
+                    <MudButton StartIcon="@Icons.Material.Filled.Notifications" Color="Color.Tertiary">
+                        Live Alerts
+                    </MudButton>
+                </MudButtonGroup>
+            </MudPaper>
+        </MudItem>
+    </MudGrid>
+
+    @* Call to Action *@
+    <MudPaper Elevation="8" Class="pa-8 deepdrft-gradient-primary deepdrft-cta-container">
+        <MudText Typo="Typo.h3" Color="Color.Surface" Class="mb-4 deepdrft-text-bold">
+            Ready to Dive Deep?
+        </MudText>
+        <MudText Typo="Typo.h6" Color="Color.Surface" Class="mb-6 deepdrft-text-description">
+            Immerse yourself in the electronic soundscapes of DeepDrft
+        </MudText>
+        <MudButtonGroup Size="Size.Large" Class="deepdrft-cta-buttons">
+            <MudButton Variant="Variant.Filled" 
+                       Color="Color.Surface" 
+                       Class="deepdrft-button-primary deepdrft-button-spaced">
+                <MudIcon Icon="@Icons.Material.Filled.PlayCircle" Class="mr-2" />
+                EXPLORE MUSIC
+            </MudButton>
+            <MudButton Variant="Variant.Outlined" 
+                       Color="Color.Surface" 
+                       Class="deepdrft-button-outlined deepdrft-button-spaced">
+                <MudIcon Icon="@Icons.Material.Filled.Schedule" Class="mr-2" />
+                LIVE SCHEDULE
+            </MudButton>
+        </MudButtonGroup>
+    </MudPaper>
+
+</MudContainer>
 

DeepDrftWeb/Components/App.razor

@@ -11,6 +11,7 @@
     <link href="_@Assets["content/MudBlazor.ThemeManager/MudBlazorThemeManager.css"]" rel="stylesheet" />
     <link href=@Assets["_content/MudBlazor/MudBlazor.min.css"] rel="stylesheet" />
     <link rel="stylesheet" href="@Assets["DeepDrftWeb.styles.css"]"/>
+    <link rel="stylesheet" href="styles/deepdrft-styles.css" />
     <ImportMap />
     <link rel="icon" type="image/ico" href="deepdrft-logo.ico" />
     <HeadOutlet @rendermode="InteractiveAuto" />

DeepDrftWeb/wwwroot/styles/deepdrft-styles.css

@@ -0,0 +1,288 @@
+/* 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);
+}
+
+/* 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%);
+}
+
+/* Text Shadows and Effects */
+.deepdrft-text-hero {
+    font-weight: bold;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+    font-size: clamp(2rem, 8vw, 4rem);
+}
+
+.deepdrft-text-subtitle {
+    font-weight: 300;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
+}
+
+.deepdrft-text-description {
+    font-weight: 400;
+    opacity: 0.9;
+}
+
+.deepdrft-text-bold {
+    font-weight: bold;
+}
+
+.deepdrft-text-readable {
+    line-height: 1.6;
+}
+
+/* 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;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
+.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;
+    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;
+}
+
+/* Audio Player Layout */
+.deepdrft-audio-controls {
+    display: flex;
+    align-items: center;
+    width: 140px;
+}
+
+.deepdrft-audio-time {
+    min-width: 120px;
+}
+
+.deepdrft-audio-volume-icon {
+    margin-right: 4px;
+}
+
+.deepdrft-audio-slider {
+    flex: 1;
+}
+
+.deepdrft-audio-slider-seek {
+    flex: 1;
+    margin-right: 8px;
+}
+
+/* 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 {
+        width: 200px;
+        height: 200px;
+    }
+}