2026 Deep DRFT Theme Draft 1 WIP

DeepDrftWeb.Client/Controls/AppNavLink.razor.css

@@ -1,4 +1,4 @@
-/* Navigation menu item styling */
+/* Navigation menu item styling */
 .nav-menu-item {
     display: block;
     padding: 8px 16px;
@@ -29,26 +29,42 @@
     transition: all 0.3s ease;
 }
 
-/* Hover state */
+/* === HOVER STATES === */
-.nav-menu-item:hover {
-    background-color: rgba(138, 43, 226, 0.08);
-    color: #8A2BE2;
-    text-decoration: none;
-}
 
-.nav-menu-item:hover .nav-item-content {
+/* Base hover */
-    color: var(--mud-palette-tertiary);
+.nav-menu-item:hover {
+    text-decoration: none;
 }
 
 .nav-menu-item:hover .nav-item-text {
     font-weight: 600;
 }
 
-/* Active state */
+/* Charleston (Light Mode) - Gold hover tint */
+:global(.deepdrft-theme-light) .nav-menu-item:hover {
+    background-color: rgba(201, 169, 98, 0.1);
+    color: #1C1C1C;
+}
+
+:global(.deepdrft-theme-light) .nav-menu-item:hover .nav-item-content {
+    color: #B8848C;
+}
+
+/* Lowcountry (Dark Mode) - Coral glow hover */
+:global(.deepdrft-theme-dark) .nav-menu-item:hover {
+    background-color: rgba(224, 122, 95, 0.12);
+    color: #E07A5F;
+    box-shadow: 0 0 10px rgba(224, 122, 95, 0.15);
+}
+
+:global(.deepdrft-theme-dark) .nav-menu-item:hover .nav-item-content {
+    color: #E07A5F;
+}
+
+/* === ACTIVE STATES === */
+
+/* Base active */
 .nav-menu-item.active {
-    background-color: rgba(138, 43, 226, 0.12);
-    color: var(--mud-palette-primary);
-    border-left: 4px solid #8A2BE2;
     padding-left: 12px;
 }
 
@@ -64,8 +80,39 @@
     font-weight: 600;
 }
 
-/* Focus state */
+/* Charleston (Light Mode) - Iron left border */
-.nav-menu-item:focus {
+:global(.deepdrft-theme-light) .nav-menu-item.active {
-    outline: 2px solid #8A2BE2;
+    background-color: rgba(28, 28, 28, 0.08);
+    color: #1C1C1C;
+    border-left: 4px solid #1C1C1C;
+}
+
+:global(.deepdrft-theme-light) .nav-menu-item.active .nav-item-content {
+    color: #1C1C1C;
+}
+
+/* Lowcountry (Dark Mode) - Gold active indicator */
+:global(.deepdrft-theme-dark) .nav-menu-item.active {
+    background-color: rgba(233, 196, 106, 0.12);
+    color: #E9C46A;
+    border-left: 4px solid #E9C46A;
+    box-shadow: 0 0 12px rgba(233, 196, 106, 0.2);
+}
+
+:global(.deepdrft-theme-dark) .nav-menu-item.active .nav-item-content {
+    color: #E9C46A;
+}
+
+/* === FOCUS STATES === */
+
+/* Charleston (Light Mode) - Iron focus outline */
+:global(.deepdrft-theme-light) .nav-menu-item:focus {
+    outline: 2px solid #1C1C1C;
+    outline-offset: 2px;
+}
+
+/* Lowcountry (Dark Mode) - Coral focus outline */
+:global(.deepdrft-theme-dark) .nav-menu-item:focus {
+    outline: 2px solid #E07A5F;
     outline-offset: 2px;
 }

DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css

@@ -24,15 +24,33 @@
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
     border-radius: 1rem;
-    border: 1px solid var(--deepdrft-theme-primary);
+    border: 2px solid var(--deepdrft-theme-primary);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-                0 2px 10px var(--deepdrft-theme-secondary);
     color: #ffffff;
     transition: all 0.3s ease;
     overflow: hidden;
     margin-bottom: 1rem;
 }
 
+/* Charleston (Light Mode) - Iron frame effect */
+:global(.deepdrft-theme-light) .player-backdrop {
+    background: rgba(253, 251, 247, 0.92);
+    border: 2px solid #1C1C1C;
+    box-shadow: 0 4px 20px rgba(28, 28, 28, 0.2),
+                inset 0 0 0 1px rgba(28, 28, 28, 0.05);
+    color: #1C1C1C;
+}
+
+/* Lowcountry (Dark Mode) - Warm sunset glow effect */
+:global(.deepdrft-theme-dark) .player-backdrop {
+    background: rgba(20, 20, 32, 0.88);
+    border: 1px solid rgba(224, 122, 95, 0.5);
+    box-shadow: 0 0 20px rgba(224, 122, 95, 0.25),
+                0 0 40px rgba(123, 109, 141, 0.15),
+                0 4px 20px rgba(0, 0, 0, 0.4);
+    color: #F5F0E6;
+}
+
 /* Control buttons positioning */
 .player-controls {
     position: absolute;
@@ -58,15 +76,36 @@
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
     border: 2px solid var(--deepdrft-theme-secondary);
-    box-shadow: 0 4px 20px var(--deepdrft-theme-primary),
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-                0 2px 10px rgba(0, 0, 0, 0.3);
     transition: all 0.3s ease;
 }
 
+/* Charleston (Light Mode) - Iron dock */
+:global(.deepdrft-theme-light) .minimized-dock {
+    background: linear-gradient(135deg, #1C1C1C 0%, #B8848C 50%, #C9A962 100%);
+    border: 2px solid #1C1C1C;
+    box-shadow: 0 4px 15px rgba(28, 28, 28, 0.4);
+}
+
+/* Lowcountry (Dark Mode) - Warm sunset dock */
+:global(.deepdrft-theme-dark) .minimized-dock {
+    background: linear-gradient(135deg, #E07A5F 0%, #7B6D8D 50%, #E9C46A 100%);
+    border: 2px solid rgba(224, 122, 95, 0.6);
+    box-shadow: 0 0 20px rgba(224, 122, 95, 0.4),
+                0 0 40px rgba(123, 109, 141, 0.2);
+}
+
 .minimized-dock:hover {
     transform: scale(1.1);
-    box-shadow: 0 6px 25px rgba(var(--deepdrft-theme-primary), 0.8),
+}
-                0 3px 15px rgba(0, 0, 0, 0.4);
+
+:global(.deepdrft-theme-light) .minimized-dock:hover {
+    box-shadow: 0 6px 20px rgba(28, 28, 28, 0.5);
+}
+
+:global(.deepdrft-theme-dark) .minimized-dock:hover {
+    box-shadow: 0 0 30px rgba(224, 122, 95, 0.5),
+                0 0 50px rgba(123, 109, 141, 0.3);
 }
 
 /* Minimized button styles */

DeepDrftWeb.Client/Controls/AudioPlayerBar/SpectrumVisualizer.razor.css

@@ -26,11 +26,22 @@
     min-width: 4px;
     height: var(--bar-height, 2%);
     min-height: 2px;
-    background: var(--deepdrft-theme-secondary, #8A2BE2);
+    background: var(--deepdrft-theme-secondary);
     border-radius: 2px 2px 0 0;
     transition: height 0.05s ease-out;
 }
 
+/* Charleston (Light Mode) - Iron to gold colored bars */
+:global(.deepdrft-theme-light) .spectrum-bar {
+    background: linear-gradient(to top, #1C1C1C 0%, #B8848C 50%, #C9A962 100%);
+}
+
+/* Lowcountry (Dark Mode) - Coral to gold bars with warm glow */
+:global(.deepdrft-theme-dark) .spectrum-bar {
+    background: linear-gradient(to top, #E07A5F 0%, #E9C46A 100%);
+    box-shadow: 0 0 4px rgba(233, 196, 106, 0.4);
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
     .spectrum-container {

DeepDrftWeb.Client/Layout/MainLayout.razor

@@ -6,7 +6,8 @@
 <MudPopoverProvider />
 <MudDialogProvider />
 <MudSnackbarProvider />
-<MudLayout Style="display: flex; flex-direction: column; min-height: 100vh">
+<div class="@ThemeWrapperClass">
+    <MudLayout Style="display: flex; flex-direction: column; min-height: 100vh">
         <AudioPlayerProvider>
             <MudAppBar Elevation="_themeManager.AppBarElevation">
                 <MudAvatar Class="mr-2">
@@ -23,7 +24,8 @@
                 <AudioPlayerBar />
             </MudMainContent>
         </AudioPlayerProvider>
-</MudLayout>
+    </MudLayout>
+</div>
 
 
 <div id="blazor-error-ui" data-nosnippet>
@@ -49,35 +51,35 @@
                 {
                     Default = new DefaultTypography()
                     {
-                        FontFamily = new[] {"Electrolize", "sans-serif"}
+                        FontFamily = new[] {"Source Serif 4", "serif"}
                     },
                     H1 = new H1Typography()
                     {
-                        FontFamily = new[] {"Audiowide", "sans-serif"}
+                        FontFamily = new[] {"Playfair Display", "serif"}
                     },
                     H2 = new H2Typography()
                     {
-                        FontFamily = new[] {"Michroma", "sans-serif"}
+                        FontFamily = new[] {"Cormorant Garamond", "serif"}
                     },
                     H3 = new H3Typography()
                     {
-                        FontFamily = new[] {"Michroma", "sans-serif"}
+                        FontFamily = new[] {"Cormorant Garamond", "serif"}
                     },
                     H4 = new H4Typography()
                     {
-                        FontFamily = new[] {"Michroma", "sans-serif"}
+                        FontFamily = new[] {"Cormorant Garamond", "serif"}
                     },
                     H5 = new H5Typography()
                     {
-                        FontFamily = new[] {"Michroma", "sans-serif"}
+                        FontFamily = new[] {"Cormorant Garamond", "serif"}
                     },
                     H6 = new H6Typography()
                     {
-                        FontFamily = new[] {"Michroma", "sans-serif"}
+                        FontFamily = new[] {"Cormorant Garamond", "serif"}
                     },
                     Button = new ButtonTypography()
                     {
-                        FontFamily = new[] {"Michroma", "sans-serif"}
+                        FontFamily = new[] {"Cormorant Garamond", "serif"}
                     }
                 }
             }
@@ -110,66 +112,70 @@
         StateHasChanged();
     }
 
+    // Charleston in the Day - Light Theme
+    // Inspired by Charleston's historic architecture: white stucco, black wrought iron gates, elegant accents
     private readonly PaletteLight _lightPalette = new()
     {
-        Primary = "#8A2BE2",           // BlueViolet - main DeepDrft purple
+        Primary = "#1C1C1C",           // Wrought iron black - strong, elegant
-        Secondary = "#FF1493",         // DeepPink - main DeepDrft pink
+        Secondary = "#B8848C",         // Dusty rose - elegant accent
-        Tertiary = "#4B0082",          // Indigo - DeepDrft deep purple
+        Tertiary = "#C9A962",          // Antique gold - replaces brown
-        Info = "#9370DB",             // MediumPurple - DeepDrft accent purple
+        Info = "#2196F3",              // MudBlazor default blue (semantic)
-        Success = "#98FB98",          // PaleGreen - soft success
+        Success = "#4CAF50",           // MudBlazor default green (semantic)
-        Warning = "#FFEAA7",          // Light peach - soft warning
+        Warning = "#FF9800",           // MudBlazor default amber (semantic)
-        Error = "#FFB6C1",            // LightPink - soft error
+        Error = "#F44336",             // MudBlazor default red (semantic)
-        Black = "#2F2F2F",            // Dark gray for text
+        Black = "#1C1C1C",             // Wrought iron black
-        White = "#FFFFFF",            // Pure white
+        White = "#FDFBF7",             // Cream white (stucco)
-        Surface = "#FFFAF0",          // FloralWhite - creamy surface
+        Surface = "#FDFBF7",           // Cream stucco surface
-        Background = "#FAF0E6",       // Linen - warm cream background
+        Background = "#F5F2EC",        // Warm linen background
-        AppbarText = "#2F2F2F",       // Dark text on light appbar
+        AppbarText = "#FDFBF7",        // Cream text on dark appbar (FIX)
-        AppbarBackground = "rgba(138,43,226,0.85)", // Translucent DeepDrft primary
+        AppbarBackground = "#1C1C1C",  // Solid wrought iron appbar
-        DrawerBackground = "rgba(138,43,226,0.1)", // Very light DeepDrft primary
+        DrawerBackground = "#F5F2EC",  // Linen drawer
-        TextPrimary = "#2F2F2F",      // Dark primary text
+        TextPrimary = "#1C1C1C",       // Wrought iron text
-        TextSecondary = "#6B6B6B",    // Medium gray secondary text
+        TextSecondary = "#4A4A4A",     // Softer iron text
-        GrayLight = "rgba(138,43,226,0.1)",        // Light DeepDrft tint
+        GrayLight = "rgba(28,28,28,0.08)",         // Light iron tint
-        GrayLighter = "rgba(138,43,226,0.05)",     // Very light DeepDrft tint
+        GrayLighter = "rgba(28,28,28,0.04)",       // Very light iron tint
-        GrayDefault = "rgba(138,43,226,0.2)",      // Medium DeepDrft tint
+        GrayDefault = "rgba(28,28,28,0.15)",       // Medium iron tint
-        GrayDark = "rgba(138,43,226,0.4)",         // Darker DeepDrft tint
+        GrayDark = "rgba(28,28,28,0.25)",          // Darker iron tint
-        Divider = "rgba(138,43,226,0.15)",         // Soft DeepDrft divider lines
+        Divider = "rgba(28,28,28,0.12)",           // Subtle divider lines
-        TableLines = "rgba(138,43,226,0.15)",      // Soft DeepDrft table lines
+        TableLines = "rgba(28,28,28,0.12)",        // Table borders
     };
 
+    // Lowcountry Summer Nights - Dark Theme
+    // Inspired by warm sunsets over marshes, fireflies, Spanish moss, lamplight
     private readonly PaletteDark _darkPalette = new()
     {
-        Primary = "#FF1493",          // DeepPink - main DeepDrft pink for dark mode
+        Primary = "#E07A5F",           // Sunset coral - warm, not neon
-        Secondary = "#8A2BE2",        // BlueViolet - main DeepDrft purple
+        Secondary = "#7B6D8D",         // Twilight purple - muted
-        Tertiary = "#9370DB",         // MediumPurple - DeepDrft accent
+        Tertiary = "#E9C46A",          // Firefly gold - lamplight
-        Info = "#4B0082",            // Indigo - DeepDrft deep purple
+        Info = "#2196F3",              // MudBlazor default blue (semantic)
-        Success = "#00A86B",         // Jade - true jade green success color
+        Success = "#4CAF50",           // MudBlazor default green (semantic)
-        Warning = "#FF8C00",         // DarkOrange - orange warning color
+        Warning = "#FF9800",           // MudBlazor default amber (semantic)
-        Error = "#FF6347",           // Tomato - error color
+        Error = "#F44336",             // MudBlazor default red (semantic)
-        Black = "#000000",           // Pure black
+        Black = "#0A0A0F",             // Deep night black
-        White = "#FFFFFF",           // Pure white
+        White = "#F5F0E6",             // Warm moonlight white
-        Surface = "rgba(75,0,130,0.2)",         // Dark DeepDrft indigo tint
+        Surface = "rgba(123,109,141,0.12)",        // Twilight-tinted surface
-        Background = "#0A0A0A",      // Very dark background
+        Background = "#0D0D12",        // Deep twilight background
-        BackgroundGray = "#1A1A1A",  // Very dark gray
+        BackgroundGray = "#141420",    // Slightly lighter night
-        AppbarText = "#FFFFFF",      // White text on dark appbar
+        AppbarText = "#F5F0E6",        // Warm moonlight text
-        AppbarBackground = "rgba(75,0,130,0.95)", // Translucent DeepDrft indigo
+        AppbarBackground = "rgba(13,13,18,0.95)",  // Translucent night
-        DrawerBackground = "rgba(75,0,130,0.15)", // Dark DeepDrft indigo tint
+        DrawerBackground = "rgba(123,109,141,0.08)", // Subtle twilight tint
-        DrawerIcon = "#E0E0E0",      // Light gray icons
+        DrawerIcon = "#E0E0E0",        // Light icons
-        DrawerText = "#E0E0E0",      // Light gray drawer text
+        DrawerText = "#E0E0E0",        // Light drawer text
-        ActionDefault = "#BDBDBD",   // Light gray for actions
+        ActionDefault = "#BDBDBD",     // Default action color
-        ActionDisabled = "#757575",  // Medium gray for disabled
+        ActionDisabled = "#757575",    // Disabled state
-        ActionDisabledBackground = "#2F2F2F", // Dark gray background
+        ActionDisabledBackground = "#1A1A2E",     // Disabled background
-        TextPrimary = "#FFFFFF",     // White primary text
+        TextPrimary = "#F5F0E6",       // Warm white primary text
-        TextSecondary = "#E0E0E0",   // Light gray secondary text
+        TextSecondary = "#B8B0C4",     // Lavender gray secondary text
         TextDisabled = "#757575",      // Disabled text
-        GrayLight = "rgba(255,20,147,0.15)",       // Light DeepDrft pink tint
+        GrayLight = "rgba(224,122,95,0.15)",       // Coral tint light
-        GrayLighter = "rgba(255,20,147,0.08)",     // Lighter DeepDrft pink tint
+        GrayLighter = "rgba(224,122,95,0.08)",     // Coral tint lighter
-        GrayDefault = "rgba(255,20,147,0.25)",     // Default DeepDrft pink tint
+        GrayDefault = "rgba(224,122,95,0.22)",     // Coral tint default
-        GrayDark = "rgba(255,20,147,0.4)",        // Darker DeepDrft pink tint
+        GrayDark = "rgba(224,122,95,0.35)",        // Coral tint dark
-        Divider = "rgba(255,20,147,0.2)",         // DeepDrft pink divider lines
+        Divider = "rgba(224,122,95,0.18)",         // Coral divider
-        LinesDefault = "rgba(255,20,147,0.2)",    // DeepDrft pink lines
+        LinesDefault = "rgba(224,122,95,0.18)",    // Coral lines
-        TableLines = "rgba(255,20,147,0.2)",      // DeepDrft pink table lines
+        TableLines = "rgba(224,122,95,0.18)",      // Coral table lines
         OverlayLight = "rgba(0,0,0,0.7)",          // Dark overlay
-        OverlayDark = "rgba(255,255,255,0.1)", // Light overlay for dark mode
+        OverlayDark = "rgba(255,255,255,0.08)",    // Light overlay
     };
 
     public string DarkLightModeButtonIcon => _isDarkMode switch
@@ -177,6 +183,9 @@
         true => Icons.Material.Rounded.AutoMode,
         false => Icons.Material.Outlined.DarkMode,
     };
+
+    // Theme wrapper class for CSS targeting
+    private string ThemeWrapperClass => _isDarkMode ? "deepdrft-theme-dark" : "deepdrft-theme-light";
 }
 
 

DeepDrftWeb.Client/Pages/Home.razor

@@ -9,33 +9,33 @@
 
         <MudGrid Justify="Justify.Center">
             <MudItem xs="12" md="8">
-                <MudText Typo="Typo.h1" Color="Color.Surface" 
+                <MudText Typo="Typo.h1"
-                         Class="mb-4 deepdrft-text-hero">
+                         Class="mb-4 deepdrft-text-hero deepdrft-hero-title">
                     DEEPDRFT
                 </MudText>
 
-                <MudText Typo="Typo.h4" Color="Color.Surface" 
+                <MudText Typo="Typo.h4"
-                         Class="mb-6 deepdrft-text-subtitle">
+                         Class="mb-6 deepdrft-text-subtitle deepdrft-hero-subtitle">
                     ELECTRONIC MUSIC COLLECTIVE
                 </MudText>
 
-                <MudText Typo="Typo.h6" Color="Color.Surface" 
+                <MudText Typo="Typo.h6"
-                         Class="mb-8 deepdrft-text-description deepdrft-hero-text-container">
+                         Class="mb-8 deepdrft-text-description deepdrft-hero-text-container deepdrft-hero-description">
                     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" 
+                           Color="Color.Primary"
                            Size="Size.Large"
-                           Class="mr-4 mb-2 deepdrft-button-primary">
+                           Class="mr-4 mb-2 deepdrft-hero-button-filled">
                     <MudIcon Icon="@Icons.Material.Filled.PlayArrow" Class="mr-2" />
                     START STREAMING
                 </MudButton>
 
                 <MudButton Variant="Variant.Outlined"
-                           Color="Color.Surface" 
+                           Color="Color.Primary"
                            Size="Size.Large"
-                           Class="mb-2 deepdrft-button-outlined">
+                           Class="mb-2 deepdrft-hero-button-outlined">
                     <MudIcon Icon="@Icons.Material.Filled.LibraryMusic" Class="mr-2" />
                     BROWSE TRACKS
                 </MudButton>
@@ -199,22 +199,24 @@
 
     @* 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">
+        <MudText Typo="Typo.h3" Class="mb-4 deepdrft-text-bold deepdrft-hero-title">
             Ready to Dive Deep?
         </MudText>
-        <MudText Typo="Typo.h6" Color="Color.Surface" Class="mb-6 deepdrft-text-description">
+        <MudText Typo="Typo.h6" Class="mb-6 deepdrft-text-description deepdrft-hero-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" 
+                       Color="Color.Primary"
-                       Class="deepdrft-button-primary deepdrft-button-spaced">
+                       Size="Size.Large"
+                       Class="deepdrft-hero-button-filled deepdrft-button-spaced">
                 <MudIcon Icon="@Icons.Material.Filled.PlayCircle" Class="mr-2" />
                 EXPLORE MUSIC
             </MudButton>
             <MudButton Variant="Variant.Outlined"
-                       Color="Color.Surface" 
+                       Color="Color.Primary"
-                       Class="deepdrft-button-outlined deepdrft-button-spaced">
+                       Size="Size.Large"
+                       Class="deepdrft-hero-button-outlined deepdrft-button-spaced">
                 <MudIcon Icon="@Icons.Material.Filled.Schedule" Class="mr-2" />
                 LIVE SCHEDULE
             </MudButton>

DeepDrftWeb/Components/App.razor

@@ -7,9 +7,9 @@
     <base href="/" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Michroma&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Electrolize:wght@400&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;500;600&display=swap" rel="stylesheet">
     <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"]"/>

DeepDrftWeb/wwwroot/styles/deepdrft-styles.css

@@ -2,66 +2,144 @@
 
 /* === AESTHETIC STYLES (Reusable across components) === */
 
-/* Color Variables - Aligned with MudBlazor Theme */
+/* Color Variables - Charleston in the Day (Light Mode Default) */
 :root {
-    /* Main DeepDrft Colors */
+    /* Charleston Theme Colors */
-    --deepdrft-primary: #8A2BE2;        /* BlueViolet - Primary brand color */
+    --deepdrft-primary: #1C1C1C;        /* Wrought iron black */
-    --deepdrft-secondary: #FF1493;      /* DeepPink - Secondary brand color */
+    --deepdrft-secondary: #B8848C;      /* Dusty rose - elegant accent */
-    --deepdrft-tertiary: #4B0082;       /* Indigo - Deep accent color */
+    --deepdrft-tertiary: #C9A962;       /* Antique gold - replaces brown */
-    --deepdrft-accent: #9370DB;         /* MediumPurple - Light accent */
+    --deepdrft-accent: #7D9B8C;         /* Sage green */
+
+    /* Extended Palette - Light Theme (Charleston) */
+    --deepdrft-quaternary: #7D9B8C;     /* Sage green */
+    --deepdrft-quinary: #6B7D8A;        /* Slate blue */
+    --deepdrft-senary: #C4967A;         /* Warm terracotta */
+    --deepdrft-septenary: #8A7A96;      /* Soft plum */
 
     /* Surface Colors */
-    --deepdrft-surface: rgba(255, 255, 255, 1);
+    --deepdrft-surface: #FDFBF7;
-    --deepdrft-surface-alpha: rgba(255, 255, 255, 0.9);
+    --deepdrft-surface-alpha: rgba(253, 251, 247, 0.9);
-    --deepdrft-theme-background-gray: rgba(26, 26, 26, 0.5);
+    --deepdrft-background: #F5F2EC;
+    --deepdrft-theme-background-gray: rgba(245, 242, 236, 0.9);
 
-    /* Theme-aware Variables (Light Mode Default) */
+    /* Theme-aware Variables */
     --deepdrft-theme-primary: var(--deepdrft-primary);
     --deepdrft-theme-secondary: var(--deepdrft-secondary);
     --deepdrft-theme-tertiary: var(--deepdrft-tertiary);
-    --deepdrft-theme-info: var(--deepdrft-accent);
+    --deepdrft-theme-quaternary: var(--deepdrft-quaternary);
+    --deepdrft-theme-quinary: var(--deepdrft-quinary);
+    --deepdrft-theme-senary: var(--deepdrft-senary);
+    --deepdrft-theme-septenary: var(--deepdrft-septenary);
+
+    /* Charleston-specific accent colors */
+    --charleston-iron: #1C1C1C;
+    --charleston-cream: #FDFBF7;
+    --charleston-rose: #B8848C;
+    --charleston-gold: #C9A962;
+    --charleston-sage: #7D9B8C;
 
     /* Font Hierarchy - DRY font definitions */
-    --deepdrft-font-largest-headers: "Audiowide", sans-serif;     /* h1, hero text, main titles */
+    --deepdrft-font-largest-headers: "Playfair Display", serif;   /* h1, hero text, main titles */
-    --deepdrft-font-headers: "Michroma", sans-serif;              /* h2-h6, visual components, buttons */
+    --deepdrft-font-headers: "Cormorant Garamond", serif;         /* h2-h6, visual components, buttons */
-    --deepdrft-font-body: "Electrolize", sans-serif;              /* body text, paragraphs, smaller elements */
+    --deepdrft-font-body: "Source Serif 4", serif;                /* body text, paragraphs, smaller elements */
 }
 
-/* Dark Mode Variables */
+/* Lowcountry Summer Nights (Dark Mode) */
-[data-theme="dark"], .mud-theme-dark {
+/* Use our custom theme class for reliable CSS targeting */
-    --deepdrft-theme-primary: #FF1493;     /* DeepPink for dark mode */
+.deepdrft-theme-dark {
-    --deepdrft-theme-secondary: #8A2BE2;   /* BlueViolet for dark mode */
+    --deepdrft-primary: #E07A5F;        /* Sunset coral - warm, not neon */
-    --deepdrft-theme-tertiary: #9370DB;    /* MediumPurple for dark mode */
+    --deepdrft-secondary: #7B6D8D;      /* Twilight purple - muted */
-    --deepdrft-theme-info: #4B0082;        /* Indigo for dark mode */
+    --deepdrft-tertiary: #E9C46A;       /* Firefly gold - lamplight */
+    --deepdrft-accent: #5E8B9C;         /* Marsh blue */
+
+    /* Extended Palette - Dark Theme (Lowcountry) */
+    --deepdrft-quaternary: #8AA39B;     /* Spanish moss */
+    --deepdrft-quinary: #5E8B9C;        /* Marsh dusk */
+    --deepdrft-senary: #D4845A;         /* Ember orange */
+    --deepdrft-septenary: #6A5A7C;      /* Night violet */
+
+    /* Surface Colors - Dark */
+    --deepdrft-surface: rgba(123,109,141,0.12);
+    --deepdrft-surface-alpha: rgba(13, 13, 18, 0.95);
+    --deepdrft-background: #0D0D12;
+    --deepdrft-theme-background-gray: rgba(20, 20, 32, 0.85);
+
+    /* Theme-aware Variables */
+    --deepdrft-theme-primary: var(--deepdrft-primary);
+    --deepdrft-theme-secondary: var(--deepdrft-secondary);
+    --deepdrft-theme-tertiary: var(--deepdrft-tertiary);
+    --deepdrft-theme-quaternary: var(--deepdrft-quaternary);
+    --deepdrft-theme-quinary: var(--deepdrft-quinary);
+    --deepdrft-theme-senary: var(--deepdrft-senary);
+    --deepdrft-theme-septenary: var(--deepdrft-septenary);
+
+    /* Lowcountry-specific accent colors */
+    --lowcountry-coral: #E07A5F;
+    --lowcountry-twilight: #7B6D8D;
+    --lowcountry-gold: #E9C46A;
+    --lowcountry-marsh: #5E8B9C;
+    --lowcountry-moss: #8AA39B;
+    --lowcountry-ember: #D4845A;
 }
 
-/* Primary Gradient Backgrounds */
+/* Primary Gradient Backgrounds - Charleston (Light Mode Default) */
-.deepdrft-gradient-primary {
+/* Light mode: subtle cream background with dark text on top */
-    background: linear-gradient(135deg, #8A2BE2 0%, #FF1493 50%, #4B0082 100%);
+.deepdrft-theme-light .deepdrft-gradient-primary {
+    background: linear-gradient(135deg, #F5F2EC 0%, #E8E4DC 50%, #DDD5C8 100%) !important;
 }
 
-.deepdrft-gradient-hero {
+.deepdrft-theme-light .deepdrft-gradient-hero {
-    background: linear-gradient(135deg, #8A2BE2 0%, #FF1493 50%, #4B0082 100%);
+    background: linear-gradient(135deg, #F5F2EC 0%, #E8E4DC 50%, #DDD5C8 100%) !important;
 }
 
-.deepdrft-gradient-soft-primary {
+.deepdrft-theme-light .deepdrft-gradient-soft-primary {
-    background: linear-gradient(45deg, rgba(138,43,226,0.1) 0%, rgba(255,20,147,0.1) 100%);
+    background: linear-gradient(45deg, rgba(28,28,28,0.04) 0%, rgba(184,132,140,0.06) 100%) !important;
 }
 
-.deepdrft-gradient-soft-secondary {
+.deepdrft-theme-light .deepdrft-gradient-soft-secondary {
-    background: linear-gradient(45deg, rgba(75,0,130,0.1) 0%, rgba(138,43,226,0.1) 100%);
+    background: linear-gradient(45deg, rgba(201,169,98,0.06) 0%, rgba(28,28,28,0.04) 100%) !important;
 }
 
-.deepdrft-gradient-soft-accent {
+.deepdrft-theme-light .deepdrft-gradient-soft-accent {
-    background: linear-gradient(135deg, rgba(138,43,226,0.1) 0%, rgba(75,0,130,0.1) 100%);
+    background: linear-gradient(135deg, rgba(28,28,28,0.03) 0%, rgba(201,169,98,0.05) 100%) !important;
 }
 
-.deepdrft-gradient-soft-tertiary {
+.deepdrft-theme-light .deepdrft-gradient-soft-tertiary {
-    background: linear-gradient(135deg, rgba(255,20,147,0.1) 0%, rgba(138,43,226,0.1) 100%);
+    background: linear-gradient(135deg, rgba(184,132,140,0.05) 0%, rgba(28,28,28,0.03) 100%) !important;
 }
 
-.deepdrft-gradient-features {
+.deepdrft-theme-light .deepdrft-gradient-features {
-    background: linear-gradient(to right, rgba(138,43,226,0.05) 0%, rgba(255,20,147,0.05) 100%);
+    background: linear-gradient(to right, rgba(28,28,28,0.02) 0%, rgba(184,132,140,0.03) 100%) !important;
+}
+
+/* Lowcountry Gradient Overrides (Dark Mode) */
+/* Dark mode: warm sunset gradient with light text on top */
+.deepdrft-theme-dark .deepdrft-gradient-primary {
+    background: linear-gradient(135deg, #0D0D12 0%, #7B6D8D 50%, #E07A5F 100%) !important;
+}
+
+.deepdrft-theme-dark .deepdrft-gradient-hero {
+    background: linear-gradient(135deg, #0D0D12 0%, #7B6D8D 50%, #E07A5F 100%) !important;
+}
+
+.deepdrft-theme-dark .deepdrft-gradient-soft-primary {
+    background: linear-gradient(45deg, rgba(224,122,95,0.12) 0%, rgba(123,109,141,0.12) 100%) !important;
+}
+
+.deepdrft-theme-dark .deepdrft-gradient-soft-secondary {
+    background: linear-gradient(45deg, rgba(233,196,106,0.1) 0%, rgba(224,122,95,0.1) 100%) !important;
+}
+
+.deepdrft-theme-dark .deepdrft-gradient-soft-accent {
+    background: linear-gradient(135deg, rgba(224,122,95,0.08) 0%, rgba(106,90,124,0.08) 100%) !important;
+}
+
+.deepdrft-theme-dark .deepdrft-gradient-soft-tertiary {
+    background: linear-gradient(135deg, rgba(123,109,141,0.1) 0%, rgba(224,122,95,0.1) 100%) !important;
+}
+
+.deepdrft-theme-dark .deepdrft-gradient-features {
+    background: linear-gradient(to right, rgba(224,122,95,0.05) 0%, rgba(123,109,141,0.05) 100%) !important;
 }
 
 /* Font Hierarchy Styles - DRY Typography System */
@@ -77,6 +155,49 @@ h1, .deepdrft-text-hero, .deepdrft-heading-primary {
     font-size: clamp(2rem, 8vw, 4rem);
 }
 
+/* Hero Section Theme-Aware Text Colors */
+/* Light mode (cream background): dark text */
+.deepdrft-theme-light .deepdrft-hero-title {
+    color: #1C1C1C !important;  /* Iron black */
+}
+.deepdrft-theme-light .deepdrft-hero-subtitle {
+    color: #B8848C !important;  /* Dusty rose */
+}
+.deepdrft-theme-light .deepdrft-hero-description {
+    color: #4A4A4A !important;  /* Softer iron */
+}
+
+/* Dark mode (sunset gradient background): light text */
+.deepdrft-theme-dark .deepdrft-hero-title {
+    color: #F5F0E6 !important;  /* Warm moonlight white */
+}
+.deepdrft-theme-dark .deepdrft-hero-subtitle {
+    color: #E9C46A !important;  /* Firefly gold */
+}
+.deepdrft-theme-dark .deepdrft-hero-description {
+    color: #B8B0C4 !important;  /* Lavender gray */
+}
+
+/* Hero Button Overrides for Light Mode */
+.deepdrft-theme-light .deepdrft-hero-button-filled {
+    background-color: #1C1C1C !important;
+    color: #FDFBF7 !important;
+}
+.deepdrft-theme-light .deepdrft-hero-button-outlined {
+    border-color: #1C1C1C !important;
+    color: #1C1C1C !important;
+}
+
+/* Hero Button Overrides for Dark Mode */
+.deepdrft-theme-dark .deepdrft-hero-button-filled {
+    background-color: #E07A5F !important;
+    color: #0D0D12 !important;
+}
+.deepdrft-theme-dark .deepdrft-hero-button-outlined {
+    border-color: #F5F0E6 !important;
+    color: #F5F0E6 !important;
+}
+
 /* Headers and Visual Components - Michroma */
 h2, h3, h4, h5, h6, 
 .deepdrft-heading-secondary, 
@@ -131,26 +252,34 @@ body, p, span, div,
     font-family: var(--deepdrft-font-body) !important;
 }
 
-/* Border Accents */
+/* Border Accents - Theme Aware */
 .deepdrft-border-left-primary {
-    border-left: 4px solid #FF1493;
+    border-left: 4px solid var(--deepdrft-theme-primary);
 }
 
 .deepdrft-border-left-secondary {
-    border-left: 4px solid #8A2BE2;
+    border-left: 4px solid var(--deepdrft-theme-secondary);
+}
+
+.deepdrft-border-left-tertiary {
+    border-left: 4px solid var(--deepdrft-theme-tertiary);
 }
 
 .deepdrft-border-top-primary {
-    border-top: 4px solid #8A2BE2;
+    border-top: 4px solid var(--deepdrft-theme-primary);
 }
 
 .deepdrft-border-top-secondary {
-    border-top: 4px solid #FF1493;
+    border-top: 4px solid var(--deepdrft-theme-secondary);
+}
+
+.deepdrft-border-top-tertiary {
+    border-top: 4px solid var(--deepdrft-theme-tertiary);
 }
 
 /* Buttons */
 .deepdrft-button-primary {
-    color: #8A2BE2;
+    color: var(--deepdrft-theme-primary);
     font-weight: bold;
     padding: 10px 24px;
     box-shadow: 0 4px 8px rgba(0,0,0,0.3);
@@ -164,21 +293,57 @@ body, p, span, div,
     margin: 8px;
 }
 
-/* Card Aesthetics */
+/* Card Aesthetics - Theme Aware */
-.deepdrft-card-purple-tint {
+/* Charleston (Light): iron, rose, gold, sage tints */
-    background: rgba(138,43,226,0.1);
+/* Lowcountry (Dark): coral, twilight, gold, moss tints */
+.deepdrft-theme-light .deepdrft-card-purple-tint {
+    background: rgba(138,122,150,0.1) !important;  /* Soft plum tint */
+}
+.deepdrft-theme-dark .deepdrft-card-purple-tint {
+    background: rgba(123,109,141,0.12) !important;  /* Twilight purple */
 }
 
-.deepdrft-card-pink-tint {
+.deepdrft-theme-light .deepdrft-card-pink-tint {
-    background: rgba(255,20,147,0.1);
+    background: rgba(184,132,140,0.1) !important;  /* Rose tint */
+}
+.deepdrft-theme-dark .deepdrft-card-pink-tint {
+    background: rgba(224,122,95,0.12) !important;  /* Sunset coral */
 }
 
-.deepdrft-card-indigo-tint {
+.deepdrft-theme-light .deepdrft-card-indigo-tint {
-    background: rgba(75,0,130,0.1);
+    background: rgba(28,28,28,0.08) !important;  /* Iron tint */
+}
+.deepdrft-theme-dark .deepdrft-card-indigo-tint {
+    background: rgba(106,90,124,0.12) !important;  /* Night violet */
 }
 
-.deepdrft-card-lavender-tint {
+.deepdrft-theme-light .deepdrft-card-lavender-tint {
-    background: rgba(147,112,219,0.1);
+    background: rgba(125,155,140,0.1) !important;  /* Sage tint */
+}
+.deepdrft-theme-dark .deepdrft-card-lavender-tint {
+    background: rgba(138,163,155,0.1) !important;  /* Moss tint */
+}
+
+/* Additional theme-specific card tints */
+.deepdrft-theme-light .deepdrft-card-primary-tint {
+    background: rgba(28,28,28,0.06) !important;
+}
+.deepdrft-theme-dark .deepdrft-card-primary-tint {
+    background: rgba(224,122,95,0.1) !important;
+}
+
+.deepdrft-theme-light .deepdrft-card-secondary-tint {
+    background: rgba(184,132,140,0.08) !important;
+}
+.deepdrft-theme-dark .deepdrft-card-secondary-tint {
+    background: rgba(123,109,141,0.1) !important;
+}
+
+.deepdrft-theme-light .deepdrft-card-tertiary-tint {
+    background: rgba(201,169,98,0.08) !important;
+}
+.deepdrft-theme-dark .deepdrft-card-tertiary-tint {
+    background: rgba(233,196,106,0.1) !important;
 }
 
 /* Track Card Specific */
@@ -313,3 +478,243 @@ body, p, span, div,
         height: 200px;
     }
 }
+
+/* === CHARLESTON IN THE DAY AESTHETICS === */
+
+/* Wrought Iron Effect - decorative borders */
+.charleston-iron-border {
+    border: 2px solid var(--charleston-iron, #1C1C1C);
+    border-radius: 0;
+}
+
+.charleston-iron-border-left {
+    border-left: 4px solid var(--charleston-iron, #1C1C1C);
+}
+
+.charleston-iron-border-top {
+    border-top: 4px solid var(--charleston-iron, #1C1C1C);
+}
+
+.charleston-iron-frame {
+    border: 2px solid var(--charleston-iron, #1C1C1C);
+    box-shadow: inset 0 0 0 1px rgba(28,28,28,0.1);
+}
+
+/* Checkerboard Pattern (Charleston marble floors) */
+.charleston-checkerboard {
+    background-image:
+        linear-gradient(45deg, rgba(28,28,28,0.05) 25%, transparent 25%),
+        linear-gradient(-45deg, rgba(28,28,28,0.05) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, rgba(28,28,28,0.05) 75%),
+        linear-gradient(-45deg, transparent 75%, rgba(28,28,28,0.05) 75%);
+    background-size: 40px 40px;
+    background-position: 0 0, 0 20px, 20px -20px, -20px 0;
+}
+
+/* Stucco Surface Effect */
+.charleston-stucco {
+    background: var(--charleston-cream, #FDFBF7);
+    box-shadow: inset 0 0 20px rgba(28,28,28,0.03);
+}
+
+/* Gold Accent */
+.charleston-gold-accent {
+    border-bottom: 2px solid var(--charleston-gold, #C9A962);
+}
+
+.charleston-gold-border {
+    border: 1px solid var(--charleston-gold, #C9A962);
+}
+
+/* Rose Accent */
+.charleston-rose-accent {
+    border-bottom: 2px solid var(--charleston-rose, #B8848C);
+}
+
+.charleston-rose-border {
+    border: 1px solid var(--charleston-rose, #B8848C);
+}
+
+/* Garden Card (subtle green tint) */
+.charleston-garden-tint {
+    background: rgba(74, 124, 89, 0.08);
+}
+
+/* Iron Gate Pattern Overlay */
+.charleston-gate-pattern {
+    position: relative;
+}
+
+.charleston-gate-pattern::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image:
+        repeating-linear-gradient(
+            90deg,
+            transparent,
+            transparent 20px,
+            rgba(28,28,28,0.03) 20px,
+            rgba(28,28,28,0.03) 22px
+        );
+    pointer-events: none;
+}
+
+/* === LOWCOUNTRY SUMMER NIGHTS AESTHETICS === */
+
+/* Warm Sunset Glow Effects */
+.lowcountry-glow-coral {
+    box-shadow: 0 0 15px rgba(224, 122, 95, 0.4),
+                0 0 30px rgba(224, 122, 95, 0.2);
+}
+
+.lowcountry-glow-gold {
+    box-shadow: 0 0 15px rgba(233, 196, 106, 0.4),
+                0 0 30px rgba(233, 196, 106, 0.2);
+}
+
+.lowcountry-glow-twilight {
+    box-shadow: 0 0 15px rgba(123, 109, 141, 0.4),
+                0 0 30px rgba(123, 109, 141, 0.2);
+}
+
+.lowcountry-glow-moss {
+    box-shadow: 0 0 15px rgba(138, 163, 155, 0.4),
+                0 0 30px rgba(138, 163, 155, 0.2);
+}
+
+/* Firefly Glow (for accent elements) */
+.lowcountry-firefly-glow {
+    box-shadow: 0 0 10px rgba(233, 196, 106, 0.5),
+                0 0 20px rgba(233, 196, 106, 0.3),
+                0 0 40px rgba(233, 196, 106, 0.1);
+}
+
+/* Candlelight effect */
+.lowcountry-candlelight {
+    background: radial-gradient(
+        ellipse at center top,
+        rgba(233, 196, 106, 0.1) 0%,
+        transparent 60%
+    );
+}
+
+/* Sunset Gradient Backgrounds */
+.lowcountry-gradient-sunset {
+    background: linear-gradient(
+        135deg,
+        #E07A5F 0%,
+        #7B6D8D 50%,
+        #6A5A7C 100%
+    );
+}
+
+.lowcountry-gradient-marsh {
+    background: linear-gradient(
+        180deg,
+        rgba(13, 13, 18, 1) 0%,
+        rgba(138, 163, 155, 0.15) 100%
+    );
+}
+
+.lowcountry-gradient-twilight {
+    background: linear-gradient(
+        to bottom,
+        #E07A5F 0%,
+        #7B6D8D 40%,
+        #0D0D12 100%
+    );
+}
+
+/* Marsh Water Reflection */
+.lowcountry-water-reflection {
+    border-bottom: 2px solid var(--lowcountry-marsh, #5E8B9C);
+    box-shadow: 0 4px 15px rgba(94, 139, 156, 0.2);
+}
+
+/* Spanish Moss Texture Overlay */
+.lowcountry-moss-overlay {
+    position: relative;
+}
+
+.lowcountry-moss-overlay::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: repeating-linear-gradient(
+        180deg,
+        transparent,
+        transparent 8px,
+        rgba(123, 109, 141, 0.03) 8px,
+        rgba(123, 109, 141, 0.03) 10px
+    );
+    pointer-events: none;
+}
+
+/* Warm Border Effect */
+.lowcountry-warm-border {
+    border: 1px solid transparent;
+    border-image: linear-gradient(
+        135deg,
+        #E07A5F,
+        #7B6D8D,
+        #E9C46A
+    ) 1;
+}
+
+.lowcountry-border-coral {
+    border: 1px solid #E07A5F;
+    box-shadow: 0 0 8px rgba(224, 122, 95, 0.3);
+}
+
+.lowcountry-border-gold {
+    border: 1px solid #E9C46A;
+    box-shadow: 0 0 8px rgba(233, 196, 106, 0.3);
+}
+
+/* === EXTENDED PALETTE UTILITY CLASSES === */
+/* These provide theme-aware access to Quaternary through Septenary colors */
+
+/* Text Colors */
+.deepdrft-text-quaternary { color: var(--deepdrft-theme-quaternary); }
+.deepdrft-text-quinary { color: var(--deepdrft-theme-quinary); }
+.deepdrft-text-senary { color: var(--deepdrft-theme-senary); }
+.deepdrft-text-septenary { color: var(--deepdrft-theme-septenary); }
+
+/* Background Colors */
+.deepdrft-bg-quaternary { background-color: var(--deepdrft-theme-quaternary); }
+.deepdrft-bg-quinary { background-color: var(--deepdrft-theme-quinary); }
+.deepdrft-bg-senary { background-color: var(--deepdrft-theme-senary); }
+.deepdrft-bg-septenary { background-color: var(--deepdrft-theme-septenary); }
+
+/* Border Colors */
+.deepdrft-border-quaternary { border-color: var(--deepdrft-theme-quaternary); }
+.deepdrft-border-quinary { border-color: var(--deepdrft-theme-quinary); }
+.deepdrft-border-senary { border-color: var(--deepdrft-theme-senary); }
+.deepdrft-border-septenary { border-color: var(--deepdrft-theme-septenary); }
+
+/* Left Border Accents */
+.deepdrft-border-left-quaternary { border-left: 4px solid var(--deepdrft-theme-quaternary); }
+.deepdrft-border-left-quinary { border-left: 4px solid var(--deepdrft-theme-quinary); }
+.deepdrft-border-left-senary { border-left: 4px solid var(--deepdrft-theme-senary); }
+.deepdrft-border-left-septenary { border-left: 4px solid var(--deepdrft-theme-septenary); }
+
+/* Card Tints for Extended Palette */
+.deepdrft-card-quaternary-tint {
+    background: color-mix(in srgb, var(--deepdrft-theme-quaternary) 10%, transparent);
+}
+.deepdrft-card-quinary-tint {
+    background: color-mix(in srgb, var(--deepdrft-theme-quinary) 10%, transparent);
+}
+.deepdrft-card-senary-tint {
+    background: color-mix(in srgb, var(--deepdrft-theme-senary) 10%, transparent);
+}
+.deepdrft-card-septenary-tint {
+    background: color-mix(in srgb, var(--deepdrft-theme-septenary) 10%, transparent);
+}