/*
 * BlueTech UI Settings
 * This file contains all customizable UI element properties
 * including sizes, colors, dimensions, and text settings
 * for both Light Theme and Dark Theme
 */

:root {
    /* ============================================
       THEME COLORS - LIGHT THEME (Default)
       ============================================ */

    /* Primary Colors */
    --color-primary: #20a9fe;
    --color-primary-hover: #1a97e5;
    --color-primary-light: #4cc0ff;

    /* Background Colors */
    --color-bg-main: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-bg-tertiary: #f1f5f9;

    /* Text Colors */
    --color-text-primary: #1e293b;
    --color-text-secondary: #475569;
    --color-text-muted: #94a3b8;
    --color-text-inverse: #ffffff;

    /* Border Colors */
    --color-border: #e2e8f0;
    --color-border-focus: #20a9fe;

    /* Status Colors */
    --color-success: #22c55e;
    --color-error: #ef4444;
    --color-warning: #f59e0b;

    /* Shadow Colors */
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-color-strong: rgba(0, 0, 0, 0.15);

    /* ============================================
       SIDEBAR SETTINGS
       ============================================ */

    /* Sidebar Dimensions */
    --sidebar-width: 320px;
    --sidebar-min-width: 280px;
    --sidebar-max-width: 400px;
    --sidebar-header-height: 60px;

    /* Sidebar Colors - Light Theme */
    --sidebar-bg: #ffffff;
    --sidebar-header-bg: #f8fafc;
    --sidebar-border-color: #e2e8f0;

    /* Sidebar Text */
    --sidebar-title-text: "Chat";
    --sidebar-title-size: 18px;
    --sidebar-title-weight: 600;
    --sidebar-title-color: #1e293b;

    /* ============================================
       SIDEBAR TOGGLE BUTTON SETTINGS
       ============================================ */

    /* Toggle Button Dimensions */
    --toggle-btn-width: 120px;
    --toggle-btn-height: 48px;
    --toggle-btn-border-radius: 24px;
    --toggle-btn-bottom: 24px;
    --toggle-btn-left: 24px;

    /* Toggle Button Colors - Light Theme */
    --toggle-btn-bg: #20a9fe;
    --toggle-btn-bg-hover: #1a97e5;
    --toggle-btn-text-color: #ffffff;
    --toggle-btn-shadow: 0 4px 12px rgba(32, 169, 254, 0.4);

    /* Toggle Button Text */
    --toggle-btn-text: "Chat";
    --toggle-btn-text-size: 14px;
    --toggle-btn-text-weight: 500;

    /* ============================================
       SIDEBAR CLOSE BUTTON SETTINGS
       ============================================ */

    /* Close Button Dimensions */
    --close-btn-width: 36px;
    --close-btn-height: 36px;
    --close-btn-border-radius: 8px;

    /* Close Button Colors - Light Theme */
    --close-btn-bg: transparent;
    --close-btn-bg-hover: #f1f5f9;
    --close-btn-icon-color: #64748b;
    --close-btn-icon-color-hover: #1e293b;

    /* ============================================
       CHAT MESSAGES SETTINGS
       ============================================ */

    /* Chat Container Dimensions */
    --chat-messages-padding: 16px;
    --chat-message-gap: 12px;

    /* Message Bubble Dimensions */
    --message-bubble-padding: 12px 16px;
    --message-bubble-border-radius: 12px;
    --message-bubble-max-width: 85%;

    /* Message Bubble Colors - Light Theme (Own Messages) */
    --message-own-bg: #20a9fe;
    --message-own-text-color: #ffffff;

    /* Message Bubble Colors - Light Theme (Other Messages) */
    --message-other-bg: #f1f5f9;
    --message-other-text-color: #1e293b;

    /* Message Text Settings */
    --message-text-size: 14px;
    --message-text-line-height: 1.5;
    --message-username-size: 12px;
    --message-username-weight: 600;
    --message-timestamp-size: 11px;
    --message-timestamp-color: #94a3b8;

    /* ============================================
       CHAT INPUT SETTINGS
       ============================================ */

    /* Username Input Dimensions */
    --username-input-height: 36px;
    --username-input-padding: 8px 12px;
    --username-input-border-radius: 8px;
    --username-input-width: calc(100% - 60px);

    /* Username Input Colors - Light Theme */
    --username-input-bg: #f8fafc;
    --username-input-border: #e2e8f0;
    --username-input-text-color: #1e293b;
    --username-input-placeholder-color: #94a3b8;

    /* Username Input Text */
    --username-input-placeholder: "Your name (optional)";
    --username-input-text-size: 14px;

    /* Set Username Button Dimensions */
    --set-username-btn-width: 50px;
    --set-username-btn-height: 36px;
    --set-username-btn-border-radius: 8px;

    /* Set Username Button Colors - Light Theme */
    --set-username-btn-bg: #e2e8f0;
    --set-username-btn-bg-hover: #cbd5e1;
    --set-username-btn-text-color: #475569;

    /* Set Username Button Text */
    --set-username-btn-text: "Set";
    --set-username-btn-text-size: 13px;
    --set-username-btn-text-weight: 500;

    /* Message Input Dimensions */
    --message-input-min-height: 44px;
    --message-input-max-height: 120px;
    --message-input-padding: 12px 16px;
    --message-input-border-radius: 12px;
    --message-input-width: calc(100% - 52px);

    /* Message Input Colors - Light Theme */
    --message-input-bg: #f8fafc;
    --message-input-border: #e2e8f0;
    --message-input-border-focus: #20a9fe;
    --message-input-text-color: #1e293b;
    --message-input-placeholder-color: #94a3b8;

    /* Message Input Text */
    --message-input-placeholder: "Type your message...";
    --message-input-text-size: 14px;
    --message-input-line-height: 1.4;

    /* Send Button Dimensions */
    --send-btn-width: 44px;
    --send-btn-height: 44px;
    --send-btn-border-radius: 12px;

    /* Send Button Colors - Light Theme */
    --send-btn-bg: #20a9fe;
    --send-btn-bg-hover: #1a97e5;
    --send-btn-icon-color: #ffffff;

    /* ============================================
       HEADER SETTINGS
       ============================================ */

    /* Header Dimensions */
    --header-height: 72px;
    --header-padding: 0 32px;

    /* Header Colors - Light Theme */
    --header-bg: #ffffff;
    --header-border-color: #e2e8f0;

    /* Site Title Text */
    --site-title-text: "BlueTech";
    --site-title-size: 24px;
    --site-title-weight: 700;
    --site-title-color: #20a9fe;

    /* ============================================
       THEME TOGGLE BUTTON SETTINGS
       ============================================ */

    /* Theme Toggle Dimensions */
    --theme-toggle-width: 44px;
    --theme-toggle-height: 44px;
    --theme-toggle-border-radius: 12px;

    /* Theme Toggle Colors - Light Theme */
    --theme-toggle-bg: #f1f5f9;
    --theme-toggle-bg-hover: #e2e8f0;
    --theme-toggle-icon-color: #64748b;

    /* ============================================
       HERO SECTION SETTINGS
       ============================================ */

    /* Hero Dimensions */
    --hero-padding: 80px 32px;
    --hero-padding-top: 68px;
    --hero-padding-bottom: 75px;
    --hero-padding-x: 16px;
    --hero-min-height: 296px;
    --hero-max-width: 800px;

    /* Hero Colors - Light Theme */
    --hero-bg: linear-gradient(135deg, #20a9fe 0%, #1a97e5 100%);

    /* Hero Title Text */
    --hero-title-text: "Welcome to BlueTech";
    --hero-title-size: 48px;
    --hero-title-weight: 700;
    --hero-title-color: #ffffff;
    --hero-title-line-height: 1.2;

    /* Hero Description Text */
    --hero-description-text: "Your trusted partner for technology solutions and repair services.";
    --hero-description-size: 18px;
    --hero-description-color: rgba(255, 255, 255, 0.9);
    --hero-description-line-height: 1.6;

    /* ============================================
       FEATURE CARD SETTINGS
       ============================================ */

    /* Feature Card Dimensions */
    --feature-card-width: 300px;
    --feature-card-min-width: 280px;
    --feature-card-min-height: 200px;
    --feature-card-padding: 32px;
    --feature-card-padding-top: 32px;
    --feature-card-padding-bottom: 32px;
    --feature-card-padding-x: 24px;
    --feature-card-border-radius: 16px;
    --feature-card-gap: 24px;
    --feature-cards-gap: 24px;

    /* Feature Card Colors - Light Theme */
    --feature-card-bg: #ffffff;
    --feature-card-border: #e2e8f0;
    --feature-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --feature-card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* Feature Icon Settings */
    --feature-icon-size: 48px;
    --feature-icon-color: #20a9fe;
    --feature-icon-bg: #eff6ff;
    --feature-icon-border-radius: 12px;
    --feature-icon-padding: 12px;

    /* Feature Title Text */
    --feature-title-size: 20px;
    --feature-title-weight: 600;
    --feature-title-color: #1e293b;

    /* Feature Description Text */
    --feature-description-size: 14px;
    --feature-description-color: #64748b;
    --feature-description-line-height: 1.6;

    /* Feature Card 1 - Computer Repair */
    --feature-1-title: "Computer Repair";
    --feature-1-description: "Expert diagnosis and repair for all computer issues.";

    /* Feature Card 2 - Mobile Repair */
    --feature-2-title: "Mobile Repair";
    --feature-2-description: "Screen replacement, battery service, and more.";

    /* Feature Card 3 - Network Solutions */
    --feature-3-title: "Network Solutions";
    --feature-3-description: "Setup and maintenance for home and business networks.";

    /* ============================================
       FOOTER SETTINGS
       ============================================ */

    /* Footer Dimensions */
    --footer-height: 60px;
    --footer-padding: 0 32px;
    --footer-padding-top: 20px;
    --footer-padding-bottom: 20px;

    /* Footer Colors - Light Theme */
    --footer-bg: #f8fafc;
    --footer-border-color: #e2e8f0;

    /* Footer Text */
    --footer-text: "BlueTech - Technology Solutions";
    --footer-text-size: 14px;
    --footer-text-color: #64748b;

    /* ============================================
       ANIMATION SETTINGS
       ============================================ */

    /* Sidebar Animation */
    --sidebar-transition-duration: 0.3s;
    --sidebar-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

    /* Button Animation */
    --button-transition-duration: 0.2s;
    --button-transition-timing: ease-in-out;

    /* Card Animation */
    --card-transition-duration: 0.3s;
    --card-transition-timing: ease;

    /* ============================================
       SPACING SYSTEM
       ============================================ */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* ============================================
       BORDER RADIUS SYSTEM
       ============================================ */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ============================================
       FONT SYSTEM
       ============================================ */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    --font-size-4xl: 48px;

    /* ============================================
       NAVIGATION BAR SETTINGS (TOP BAR)
       ============================================ */

    /* Navigation Bar Dimensions */
    --navbar-width: 100%;
    --navbar-height: 72px;
    --navbar-padding-top: 8px;
    --navbar-padding-bottom: 8px;
    --navbar-padding-right: 32px;
    --navbar-padding-left: 32px;
    --navbar-max-width: 1200px;

    /* Navigation Bar Colors - Light Theme */
    --light-navbar-bg: #ffffff;
    --light-navbar-border-color: #e2e8f0;
    --navbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Active navbar colors (switch based on theme) */
    --navbar-bg: var(--light-navbar-bg);
    --navbar-border-color: var(--light-navbar-border-color);

    /* Navbar Container Dimensions */
    --navbar-container-width: 1288px;
    --navbar-container-height: 70px;
    --navbar-container-padding-top: 8px;
    --navbar-container-padding-bottom: 8px;
    --navbar-container-padding-right: 40px;
    --navbar-container-padding-left: 40px;

    /* Navbar Container Colors - Light Theme */
    --light-navbar-container-bg: transparent;
    --light-navbar-container-border: transparent;
    /* Active navbar container colors */
    --navbar-container-bg: #ff0000;
    --navbar-container-border: #ff0000;

    /* Logo Dimensions */
    --logo-width: 150px;
    --logo-height: 48px;
    --logo-padding-top: 0px;
    --logo-padding-bottom: 0px;
    --logo-padding-right: 8px;
    --logo-padding-left: 0px;
    --logo-icon-size: 40px;
    --logo-text-size: 22px;
    --logo-text-weight: 700;
    --logo-text: "BlueTech";
    --logo-gap: 12px;

    /* Logo Colors - Light Theme */
    --light-logo-text-color: #20a9fe;
    --light-logo-icon-color: #20a9fe;
    /* Active logo colors */
    --logo-text-color: var(--light-logo-text-color);
    --logo-icon-color: var(--light-logo-icon-color);

    /* Navigation Links Dimensions */
    --nav-link-width: auto;
    --nav-link-height: 36px;
    --nav-link-padding-top: 8px;
    --nav-link-padding-bottom: 8px;
    --nav-link-padding-right: 14px;
    --nav-link-padding-left: 14px;
    --nav-link-border-radius: 8px;
    --nav-link-gap: 8px;

    /* Navigation Links Colors - Light Theme */
    --light-nav-link-text-color: #475569;
    --light-nav-link-bg-hover: #f1f5f9;
    --nav-link-bg: transparent;
    --nav-link-bg-active: #eff6ff;
    --nav-link-text-color-hover: #1e293b;
    --nav-link-text-color-active: #20a9fe;
    --nav-link-icon-color: #64748b;
    --nav-link-icon-color-hover: #1e293b;
    --nav-link-icon-color-active: #20a9fe;
    /* Active nav link colors */
    --nav-link-text-color: var(--light-nav-link-text-color);
    --nav-link-bg-hover: var(--light-nav-link-bg-hover);

    /* Navigation Links Text */
    --nav-link-text-size: 15px;
    --nav-link-text-weight: 500;
    --nav-link-icon-size: 20px;

    /* Navigation Button Text */
    --nav-home-text: "Home";
    --nav-services-text: "Services";
    --nav-account-text: "Account";

    /* ============================================
       THEME SWITCHER SETTINGS
       ============================================ */

    /* Theme Switcher Dimensions */
    --theme-switcher-width: 120px;
    --theme-switcher-height: 40px;
    --theme-switcher-padding-top: 4px;
    --theme-switcher-padding-bottom: 4px;
    --theme-switcher-padding-right: 4px;
    --theme-switcher-padding-left: 4px;
    --theme-switcher-border-radius: 10px;
    --theme-switcher-gap: 4px;

    /* Theme Switcher Colors - Light Theme */
    --light-theme-switcher-bg: #f1f5f9;
    --theme-switcher-border: #e2e8f0;
    /* Active theme switcher colors */
    --theme-switcher-bg: var(--light-theme-switcher-bg);

    /* Theme Option Dimensions */
    --theme-option-width: 36px;
    --theme-option-height: 32px;
    --theme-option-border-radius: 6px;
    --theme-option-icon-size: 18px;

    /* Theme Option Colors - Light Theme */
    --theme-option-bg: transparent;
    --theme-option-bg-hover: #e2e8f0;
    --light-theme-option-bg-active: #ffffff;
    --theme-option-icon-color: #64748b;
    --theme-option-icon-color-active: #20a9fe;
    --theme-option-shadow-active: 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Active theme option colors */
    --theme-option-bg-active: var(--light-theme-option-bg-active);

    /* ============================================
       MOBILE NAVIGATION SETTINGS
       ============================================ */

    /* Mobile Breakpoint */
    --mobile-breakpoint: 768px;

    /* Mobile Menu Button Dimensions */
    --mobile-menu-btn-width: 44px;
    --mobile-menu-btn-height: 44px;
    --mobile-menu-btn-border-radius: 10px;
    --mobile-menu-btn-icon-size: 24px;

    /* Mobile Menu Button Colors - Light Theme */
    --mobile-menu-btn-bg: transparent;
    --mobile-menu-btn-bg-hover: #f1f5f9;
    --mobile-menu-btn-icon-color: #475569;

    /* Mobile Menu Dimensions */
    --mobile-menu-width: 100%;
    --mobile-menu-padding: 16px;
    --mobile-menu-gap: 8px;

    /* Mobile Menu Colors - Light Theme */
    --mobile-menu-bg: #ffffff;
    --mobile-menu-border-color: #e2e8f0;
    --mobile-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* Mobile Navigation Link Dimensions */
    --mobile-nav-link-padding: 14px 16px;
    --mobile-nav-link-border-radius: 10px;

    /* Mobile Navigation Link Colors - Light Theme */
    --mobile-nav-link-bg: transparent;
    --mobile-nav-link-bg-hover: #f1f5f9;
    --mobile-nav-link-bg-active: #eff6ff;
    --mobile-nav-link-text-color: #1e293b;
    --mobile-nav-link-icon-color: #64748b;
}

/* ============================================
   DARK THEME OVERRIDES
   Primary Color: #07090f
   Secondary Color: #20a9fe
   ============================================ */
html[data-theme="dark"],
:root[data-theme="dark"] {
    /* Primary Colors */
    --color-primary: #20a9fe;
    --color-primary-hover: #46b8ff;
    --color-primary-light: #6cd0ff;

    /* Background Colors */
    --color-bg-main: #07090f;
    --color-bg-secondary: #0d1117;
    --color-bg-tertiary: #161b22;

    /* Text Colors */
    --color-text-primary: #f0f6fc;
    --color-text-secondary: #c9d1d9;
    --color-text-muted: #8b949e;
    --color-text-inverse: #07090f;

    /* Border Colors */
    --color-border: #21262d;
    --color-border-focus: #20a9fe;

    /* Shadow Colors */
    --shadow-color: rgba(0, 0, 0, 0.4);
    --shadow-color-strong: rgba(0, 0, 0, 0.6);

    /* Sidebar Colors - Dark Theme */
    --sidebar-bg: #0d1117;
    --sidebar-header-bg: #07090f;
    --sidebar-border-color: #21262d;
    --sidebar-title-color: #f0f6fc;

    /* Toggle Button Colors - Dark Theme */
    --toggle-btn-bg: #20a9fe;
    --toggle-btn-bg-hover: #46b8ff;
    --toggle-btn-text-color: #ffffff;
    --toggle-btn-shadow: 0 4px 12px rgba(32, 169, 254, 0.4);

    /* Close Button Colors - Dark Theme */
    --close-btn-bg: transparent;
    --close-btn-bg-hover: #161b22;
    --close-btn-icon-color: #8b949e;
    --close-btn-icon-color-hover: #f0f6fc;

    /* Message Bubble Colors - Dark Theme (Own Messages) */
    --message-own-bg: #20a9fe;
    --message-own-text-color: #ffffff;

    /* Message Bubble Colors - Dark Theme (Other Messages) */
    --message-other-bg: #161b22;
    --message-other-text-color: #f0f6fc;

    /* Message Timestamp Color - Dark Theme */
    --message-timestamp-color: #8b949e;

    /* Username Input Colors - Dark Theme */
    --username-input-bg: #07090f;
    --username-input-border: #21262d;
    --username-input-text-color: #f0f6fc;
    --username-input-placeholder-color: #8b949e;

    /* Set Username Button Colors - Dark Theme */
    --set-username-btn-bg: #161b22;
    --set-username-btn-bg-hover: #21262d;
    --set-username-btn-text-color: #c9d1d9;

    /* Message Input Colors - Dark Theme */
    --message-input-bg: #07090f;
    --message-input-border: #21262d;
    --message-input-border-focus: #20a9fe;
    --message-input-text-color: #f0f6fc;
    --message-input-placeholder-color: #8b949e;

    /* Send Button Colors - Dark Theme */
    --send-btn-bg: #20a9fe;
    --send-btn-bg-hover: #46b8ff;
    --send-btn-icon-color: #ffffff;

    /* Header Colors - Dark Theme */
    --header-bg: #0d1117;
    --header-border-color: #21262d;
    --site-title-color: #20a9fe;

    /* Navigation Bar Colors - Dark Theme */
    --dark-navbar-bg: #000000;
    --dark-navbar-border-color: #21262d;
    --navbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    /* Switch to dark theme colors */
    --navbar-bg: var(--dark-navbar-bg);
    --navbar-border-color: var(--dark-navbar-border-color);

    /* Navbar Container Colors - Dark Theme */
    --dark-navbar-container-bg: transparent;
    --dark-navbar-container-border: transparent;
    /* Switch to dark theme colors */
    --navbar-container-bg: #001eff;
    --navbar-container-border: #001eff;

    /* Logo Colors - Dark Theme */
    --dark-logo-icon-color: #20a9fe;
    --dark-logo-text-color: #20a9fe;
    /* Switch to dark theme colors */
    --logo-icon-color: var(--dark-logo-icon-color);
    --logo-text-color: var(--dark-logo-text-color);

    /* Navigation Links Colors - Dark Theme */
    --dark-nav-link-text-color: #c9d1d9;
    --dark-nav-link-bg-hover: #161b22;
    --nav-link-bg: transparent;
    --nav-link-bg-active: rgba(32, 169, 254, 0.15);
    --nav-link-text-color-hover: #f0f6fc;
    --nav-link-text-color-active: #20a9fe;
    --nav-link-icon-color: #8b949e;
    --nav-link-icon-color-hover: #f0f6fc;
    --nav-link-icon-color-active: #20a9fe;
    /* Switch to dark theme colors */
    --nav-link-text-color: var(--dark-nav-link-text-color);
    --nav-link-bg-hover: var(--dark-nav-link-bg-hover);

    /* Theme Switcher Colors - Dark Theme */
    --dark-theme-switcher-bg: #161b22;
    --theme-switcher-border: #21262d;
    /* Switch to dark theme colors */
    --theme-switcher-bg: var(--dark-theme-switcher-bg);

    /* Theme Option Colors - Dark Theme */
    --theme-option-bg: transparent;
    --theme-option-bg-hover: #21262d;
    --dark-theme-option-bg-active: #0d1117;
    --theme-option-icon-color: #8b949e;
    --theme-option-icon-color-active: #20a9fe;
    --theme-option-shadow-active: 0 1px 3px rgba(0, 0, 0, 0.3);
    /* Switch to dark theme colors */
    --theme-option-bg-active: var(--dark-theme-option-bg-active);

    /* Mobile Menu Button Colors - Dark Theme */
    --mobile-menu-btn-bg: transparent;
    --mobile-menu-btn-bg-hover: #161b22;
    --mobile-menu-btn-icon-color: #c9d1d9;

    /* Mobile Menu Colors - Dark Theme */
    --mobile-menu-bg: #0d1117;
    --mobile-menu-border-color: #21262d;
    --mobile-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

    /* Mobile Navigation Link Colors - Dark Theme */
    --mobile-nav-link-bg: transparent;
    --mobile-nav-link-bg-hover: #161b22;
    --mobile-nav-link-bg-active: rgba(32, 169, 254, 0.15);
    --mobile-nav-link-text-color: #f0f6fc;
    --mobile-nav-link-icon-color: #8b949e;

    /* Theme Toggle Colors - Dark Theme */
    --theme-toggle-bg: #161b22;
    --theme-toggle-bg-hover: #21262d;
    --theme-toggle-icon-color: #8b949e;

    /* Hero Colors - Dark Theme */
    --hero-bg: linear-gradient(135deg, #1a3a7a 0%, #0d2654 100%);
    --hero-title-color: #ffffff;
    --hero-description-color: rgba(255, 255, 255, 0.85);

    /* Feature Card Colors - Dark Theme */
    --feature-card-bg: #0d1117;
    --feature-card-border: #21262d;
    --feature-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --feature-card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --feature-icon-color: #20a9fe;
    --feature-icon-bg: rgba(32, 169, 254, 0.15);
    --feature-title-color: #f0f6fc;
    --feature-description-color: #8b949e;

    /* Footer Colors - Dark Theme */
    --footer-bg: #07090f;
    --footer-border-color: #21262d;
    --footer-text-color: #8b949e;
}