/*
Theme Name: X1Techs Child
Theme URI: https://x1techs.com
Description: Child theme for Hello Elementor with dark/light mode support
Author: X1Techs
Author URI: https://x1techs.com
Template: hello-elementor
Version: 1.1.0
Text Domain: x1techs-child
*/

/* ==========================================================================
   TABLE OF CONTENTS
   
   1. BASE COLORS (shared between themes)
   2. DARK THEME COLORS
   3. LIGHT THEME COLORS  
   4. TYPOGRAPHY (responsive)
   5. BASE STYLES (low specificity - Elementor can override)
   6. UTILITY CLASSES
   7. THEME TOGGLE WIDGET
   8. .dark / .light CLASS SELECTORS
   ========================================================================== */


/* ==========================================================================
   1. BASE COLORS - Shared between both themes
   ========================================================================== */

:root {
    /* =====================================================
       BRAND COLORS - Same in both themes
       ===================================================== */
    --brand-green: #10b981;
    --brand-green-hover: #059669;
    --brand-green-light: #34d399;
    --brand-green-dark: #047857;
    
    --brand-teal: #222f30;
    --brand-teal-light: #3d5a5c;
    --brand-teal-dark: #1a2324;
    
    --brand-lime: #cef79e;
    --brand-lime-dark: #a3e635;
    
    /* Legacy aliases - for backward compatibility */
    --primary: var(--brand-green);
    --primary-hover: var(--brand-green-hover);
    --primary-light: var(--brand-green-light);
    --primary-dark: var(--brand-green-dark);
    
    --accent: var(--brand-green);
    --accent-hover: var(--brand-green-hover);
    
    /* =====================================================
       STATUS COLORS
       ===================================================== */
    --success: #22c55e;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;
    
    /* =====================================================
       GRADIENTS - Shared
       ===================================================== */
    --gradient-accent: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-hover) 100%);
    --gradient-teal: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-teal-light) 100%);
    
    /* =====================================================
       TYPOGRAPHY SCALE
       ===================================================== */
    
    /* Font Family */
    --font-primary: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-secondary: "Inter", sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", monospace;
    
    /* Font Weights */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    
    /* Font Sizes - Fixed scale */
    --text-2xs: 0.6875rem;  /* 11px - eyebrow, tiny labels */
    --text-xs: 0.75rem;     /* 12px - small labels */
    --text-sm: 0.875rem;    /* 14px - small text, badges */
    --text-base: 1rem;      /* 16px - body */
    --text-md: 0.9375rem;   /* 15px - nav items, buttons */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.1875rem;   /* 19px - subtitles */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 2rem;       /* 32px */
    --text-4xl: 2.25rem;    /* 36px */
    --text-5xl: 2.5rem;     /* 40px */
    --text-6xl: 3rem;       /* 48px */
    --text-7xl: 3.5rem;     /* 56px */
    --text-8xl: 4rem;       /* 64px */
    --text-9xl: 5.5rem;     /* 88px - hero titles */
    
    /* Heading Sizes - Desktop */
    --h1-size: clamp(2.5rem, 8vw, 5.5rem);
    --h2-size: 3rem;        /* 48px */
    --h3-size: 2rem;        /* 32px */
    --h4-size: 1.5rem;      /* 24px */
    --h5-size: 1.25rem;     /* 20px */
    --h6-size: 1rem;        /* 16px */
    
    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.08;
    --leading-snug: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    --leading-loose: 1.8;
    
    /* Letter Spacing */
    --tracking-tighter: -0.03em;
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.2em;  /* For uppercase labels/eyebrows */
    
    /* Heading Styles */
    --h-tracking: -0.02em;
    --h1-weight: 800;
    --h2-weight: 800;
    --h3-weight: 700;
    --h4-weight: 700;
    --h5-weight: 600;
    --h6-weight: 600;
    --h1-line-height: 1.08;
    --h2-line-height: 1.1;
    --h3-line-height: 1.2;
    --h4-line-height: 1.3;
    --h5-line-height: 1.4;
    --h6-line-height: 1.5;
    
    /* Body Text */
    --body-size: 1rem;
    --body-line-height: 1.6;
    --body-weight: 400;
    
    /* =====================================================
       SPACING & LAYOUT
       ===================================================== */
    
    --container-max: 1400px;
    --container-narrow: 1100px;
    --container-wide: 1600px;
    --container-padding: 1.5rem;
    
    /* Spacing Scale */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    
    /* Border Radius */
    --radius-sm: 0.375rem;  /* 6px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-2xl: 1.25rem;  /* 20px */
    --radius-3xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-medium: 300ms ease;
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   2. DARK THEME COLORS
   ========================================================================== */

[data-theme="dark"],
.dark {
    /* =====================================================
       BACKGROUNDS - Dark Mode
       ===================================================== */
    --bg: #0a0a0a;
    --bg-alt: #0f0f0f;
    --bg-elevated: #111111;
    --bg-pure: #000000;
    --surface: rgba(255, 255, 255, 0.02);
    --surface-hover: rgba(255, 255, 255, 0.05);
    --surface-active: rgba(255, 255, 255, 0.08);
    --surface-solid: #141414;
    
    /* Glass Effect Backgrounds */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    
    /* =====================================================
       TEXT COLORS - Dark Mode
       ===================================================== */
    --text: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-subtle: rgba(255, 255, 255, 0.45);
    --text-disabled: rgba(255, 255, 255, 0.3);
    
    /* =====================================================
       BORDERS - Dark Mode
       ===================================================== */
    --border: rgba(255, 255, 255, 0.08);
    --border-light: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.15);
    --border-focus: rgba(255, 255, 255, 0.2);
    --border-accent: rgba(16, 185, 129, 0.3);
    
    /* =====================================================
       SECTION BACKGROUNDS - Dark Mode
       ===================================================== */
    --hero-bg: #000000;
    --hero-gradient: 
        radial-gradient(ellipse 80% 50% at 50% 20%, rgba(16, 185, 129, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 60% 60% at 50% 80%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(16, 185, 129, 0.03) 0%, transparent 70%),
        #000000;
    
    --services-bg: #0a0a0a;
    --portfolio-bg: #0f0f0f;
    --testimonials-bg: #0a0a0a;
    --cta-bg: #0f0f0f;
    --footer-bg: #0a0a0a;
    --footer-gradient: linear-gradient(180deg, #0a0a0a 0%, #050508 100%);
    
    /* Header */
    --header-bg: transparent;
    --header-scrolled-bg: linear-gradient(180deg, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.92) 100%);
    --header-scrolled-border: rgba(255, 255, 255, 0.06);
    --header-scrolled-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.03);
    
    /* =====================================================
       BUTTONS - Dark Mode
       ===================================================== */
    
    /* Primary Button (Filled Green) */
    --btn-primary-bg: var(--brand-green);
    --btn-primary-bg-hover: var(--brand-green-hover);
    --btn-primary-text: #ffffff;
    --btn-primary-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
    
    /* Secondary Button (Ghost/Outline) */
    --btn-secondary-bg: transparent;
    --btn-secondary-bg-hover: var(--gradient-accent);
    --btn-secondary-border: rgba(255, 255, 255, 0.15);
    --btn-secondary-border-hover: var(--brand-green);
    --btn-secondary-text: #ffffff;
    --btn-secondary-text-hover: #ffffff;
    
    /* Tertiary Button (Text Link) */
    --btn-tertiary-text: var(--brand-green);
    --btn-tertiary-text-hover: var(--brand-green-light);
    
    /* =====================================================
       CARD STYLES - Dark Mode
       ===================================================== */
    --card-bg: rgba(255, 255, 255, 0.02);
    --card-border: rgba(255, 255, 255, 0.06);
    --card-border-hover: rgba(16, 185, 129, 0.3);
    --card-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.3);
    
    /* Featured Card Variants */
    --card-featured-green-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    --card-featured-green-border: rgba(16, 185, 129, 0.2);
    --card-featured-teal-bg: #059669;
    --card-featured-teal-border: rgba(206, 247, 158, 0.2);
    
    /* =====================================================
       BADGE STYLES - Dark Mode
       ===================================================== */
    --badge-bg: var(--gradient-accent);
    --badge-text: #ffffff;
    --badge-alt-bg: var(--gradient-teal);
    --badge-alt-text: var(--brand-lime);
    
    /* =====================================================
       ICON STYLES - Dark Mode
       ===================================================== */
    --icon-bg: rgba(16, 185, 129, 0.12);
    --icon-color: var(--brand-green);
    --icon-alt-bg: rgba(206, 247, 158, 0.15);
    --icon-alt-color: var(--brand-lime);
    
    /* =====================================================
       NAV LINKS - Dark Mode
       ===================================================== */
    --nav-link: rgba(255, 255, 255, 0.7);
    --nav-link-hover: #ffffff;
    --nav-link-active: #ffffff;
    --nav-underline: var(--brand-green);
    
    /* =====================================================
       SHADOWS - Dark Mode
       ===================================================== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 40px rgba(16, 185, 129, 0.5);
    
    /* =====================================================
       OVERLAYS - Dark Mode
       ===================================================== */
    --overlay: rgba(0, 0, 0, 0.5);
    --overlay-heavy: rgba(0, 0, 0, 0.8);
    
    /* =====================================================
       DIVIDERS - Dark Mode
       ===================================================== */
    --divider: rgba(255, 255, 255, 0.1);
    --divider-subtle: rgba(255, 255, 255, 0.06);
}


/* ==========================================================================
   3. LIGHT THEME COLORS
   ========================================================================== */

[data-theme="light"],
.light {
    /* =====================================================
       BACKGROUNDS - Light Mode
       ===================================================== */
    --bg: #ffffff;
    --bg-alt: #f8fafc;
    --bg-elevated: #ffffff;
    --bg-pure: #ffffff;
    --surface: #ffffff;
    --surface-hover: #f1f5f9;
    --surface-active: #e2e8f0;
    --surface-solid: #f8fafc;
    
    /* Glass Effect Backgrounds */
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(34, 47, 48, 0.08);
    --glass-shadow: 0 4px 30px rgba(34, 47, 48, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    
    /* =====================================================
       TEXT COLORS - Light Mode
       ===================================================== */
    --text: #222f30;
    --text-secondary: rgba(34, 47, 48, 0.7);
    --text-muted: rgba(34, 47, 48, 0.6);
    --text-subtle: rgba(34, 47, 48, 0.5);
    --text-disabled: rgba(34, 47, 48, 0.3);
    
    /* =====================================================
       BORDERS - Light Mode
       ===================================================== */
    --border: rgba(34, 47, 48, 0.1);
    --border-light: rgba(34, 47, 48, 0.06);
    --border-hover: rgba(34, 47, 48, 0.15);
    --border-focus: rgba(34, 47, 48, 0.2);
    --border-accent: rgba(16, 185, 129, 0.3);
    
    /* =====================================================
       SECTION BACKGROUNDS - Light Mode
       ===================================================== */
    --hero-bg: #ffffff;
    --hero-gradient: 
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 20% 80%, rgba(34, 47, 48, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 80% 60%, rgba(16, 185, 129, 0.05) 0%, transparent 40%),
        linear-gradient(180deg, #ffffff 0%, #f8faf9 50%, #f0f5f0 100%);
    
    --services-bg: #f8fafc;
    --portfolio-bg: #ffffff;
    --testimonials-bg: #f8fafc;
    --cta-bg: #f1f5f9;
    --footer-bg: #222f30;
    --footer-gradient: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    
    /* Header */
    --header-bg: transparent;
    --header-scrolled-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    --header-scrolled-border: rgba(0, 0, 0, 0.08);
    --header-scrolled-shadow: 0 4px 30px rgba(0, 0, 0, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.03);
    
    /* =====================================================
       BUTTONS - Light Mode
       ===================================================== */
    
    /* Primary Button (Filled Green) */
    --btn-primary-bg: rgba(5, 150, 105, 0.9);
    --btn-primary-bg-hover: var(--brand-teal);
    --btn-primary-text: #ffffff;
    --btn-primary-shadow: 0 2px 8px rgba(34, 47, 48, 0.08);
    
    /* Secondary Button (Ghost/Outline) */
    --btn-secondary-bg: transparent;
    --btn-secondary-bg-hover: var(--brand-teal);
    --btn-secondary-border: rgba(34, 47, 48, 0.15);
    --btn-secondary-border-hover: var(--brand-teal);
    --btn-secondary-text: var(--brand-teal);
    --btn-secondary-text-hover: #ffffff;
    
    /* Tertiary Button (Text Link) */
    --btn-tertiary-text: var(--brand-green);
    --btn-tertiary-text-hover: var(--brand-green-hover);
    
    /* =====================================================
       CARD STYLES - Light Mode
       ===================================================== */
    --card-bg: #ffffff;
    --card-border: rgba(34, 47, 48, 0.1);
    --card-border-hover: rgba(34, 47, 48, 0.15);
    --card-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.08);
    
    /* Featured Card Variants */
    --card-featured-green-bg: var(--brand-green-hover);
    --card-featured-green-border: transparent;
    --card-featured-teal-bg: var(--brand-teal);
    --card-featured-teal-border: transparent;
    
    /* =====================================================
       BADGE STYLES - Light Mode
       ===================================================== */
    --badge-bg: var(--brand-green-hover);
    --badge-text: #ffffff;
    --badge-alt-bg: var(--brand-teal);
    --badge-alt-text: #ffffff;
    
    /* =====================================================
       ICON STYLES - Light Mode
       ===================================================== */
    --icon-bg: var(--brand-teal);
    --icon-color: #ffffff;
    --icon-alt-bg: var(--brand-green-hover);
    --icon-alt-color: #ffffff;
    
    /* =====================================================
       NAV LINKS - Light Mode
       ===================================================== */
    --nav-link: rgba(0, 0, 0, 0.6);
    --nav-link-hover: #111111;
    --nav-link-active: #111111;
    --nav-underline: var(--brand-green);
    
    /* =====================================================
       SHADOWS - Light Mode
       ===================================================== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.08);
    --shadow-glow: none;
    
    /* =====================================================
       OVERLAYS - Light Mode
       ===================================================== */
    --overlay: rgba(255, 255, 255, 0.5);
    --overlay-heavy: rgba(255, 255, 255, 0.9);
    
    /* =====================================================
       DIVIDERS - Light Mode
       ===================================================== */
    --divider: rgba(34, 47, 48, 0.1);
    --divider-subtle: rgba(34, 47, 48, 0.06);
}


/* ==========================================================================
   4. TYPOGRAPHY - Responsive
   ========================================================================== */

/* Base Typography */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-size: var(--body-size);
    font-weight: var(--body-weight);
    line-height: var(--body-line-height);
}

/* Headings - Desktop */
h1, .h1 {
    font-family: var(--font-primary);
    font-size: var(--h1-size);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line-height);
    letter-spacing: var(--tracking-tighter);
}

h2, .h2 {
    font-family: var(--font-primary);
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h-tracking);
}

h3, .h3 {
    font-family: var(--font-primary);
    font-size: var(--h3-size);
    font-weight: var(--h3-weight);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h-tracking);
}

h4, .h4 {
    font-family: var(--font-primary);
    font-size: var(--h4-size);
    font-weight: var(--h4-weight);
    line-height: var(--h4-line-height);
}

h5, .h5 {
    font-family: var(--font-primary);
    font-size: var(--h5-size);
    font-weight: var(--h5-weight);
    line-height: var(--h5-line-height);
}

h6, .h6 {
    font-family: var(--font-primary);
    font-size: var(--h6-size);
    font-weight: var(--h6-weight);
    line-height: var(--h6-line-height);
}

/* Tablet Typography (max-width: 1024px) */
@media (max-width: 1024px) {
    :root {
        --h1-size: clamp(2.25rem, 6vw, 3.5rem);
        --h2-size: 2.5rem;
        --h3-size: 1.75rem;
        --h4-size: 1.375rem;
        --h5-size: 1.125rem;
        --h6-size: 1rem;
        --body-size: 1rem;
    }
}

/* Mobile Typography (max-width: 767px) */
@media (max-width: 767px) {
    :root {
        --h1-size: clamp(2rem, 8vw, 2.5rem);
        --h2-size: 2rem;
        --h3-size: 1.5rem;
        --h4-size: 1.25rem;
        --h5-size: 1.125rem;
        --h6-size: 1rem;
        --body-size: 0.9375rem;
        --container-padding: 1rem;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    :root {
        --h1-size: 1.875rem;
        --h2-size: 1.625rem;
        --h3-size: 1.375rem;
        --h4-size: 1.125rem;
        --h5-size: 1rem;
        --h6-size: 0.875rem;
    }
}


/* ==========================================================================
   5. BASE STYLES
   ========================================================================== */

/* Body background */
body.x1techs-theme {
    background-color: var(--bg);
    color: var(--text);
    transition: background-color var(--transition-medium), color var(--transition-medium);
}

/* Links */
body a, body .page a {
    color: var(--brand-green);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--brand-green-hover);
}

/* Smooth transitions for theme switching */
body,
body * {
    transition: background-color var(--transition-medium), 
                border-color var(--transition-medium),
                color var(--transition-medium),
                box-shadow var(--transition-medium);
}

/* Prevent transition on page load */
.theme-loading,
.theme-loading * {
    transition: none;
}


/* ==========================================================================
   6. UTILITY CLASSES
   ========================================================================== */

/* Background Utilities */
.bg-theme { background-color: var(--bg); }
.bg-alt { background-color: var(--bg-alt); }
.bg-surface { background-color: var(--surface); }
.bg-elevated { background-color: var(--bg-elevated); }
.bg-primary { background-color: var(--brand-green); }

/* Text Color Utilities */
.text-theme { color: var(--text); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-primary { color: var(--brand-green); }
.text-white { color: #ffffff; }

/* Border Utilities */
.border-theme { border-color: var(--border); }
.border-primary { border-color: var(--brand-green); }

/* Card Utility */
.card-theme {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-3xl);
    transition: all var(--transition-medium);
}

.card-theme:hover {
    border-color: var(--card-border-hover);
    box-shadow: var(--card-shadow-hover);
}

/* Section Utilities */
.hero-section { background: var(--hero-bg); }
.hero-gradient { background: var(--hero-gradient); }
.services-section { background: var(--services-bg); }
.portfolio-section { background: var(--portfolio-bg); }
.testimonials-section { background: var(--testimonials-bg); }
.cta-section { background: var(--cta-bg); }
.footer-section { background: var(--footer-bg); }


/* ==========================================================================
   7. THEME TOGGLE WIDGET
   ========================================================================== */

/* Base Toggle Button */
.x1techs-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    transition: all var(--transition-base);
}

/* Default style */
.x1techs-theme-toggle--default {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
}

.x1techs-theme-toggle--default:hover {
    border-color: var(--border-hover);
    background: var(--surface-hover);
}

/* Minimal style */
.x1techs-theme-toggle--minimal {
    width: auto;
    height: auto;
    background: transparent;
    border: none;
}

/* Pill style */
.x1techs-theme-toggle--pill {
    width: 80px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--surface);
    border: 1px solid var(--border);
    position: relative;
}

/* Icon containers */
.x1techs-theme-toggle .toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.x1techs-theme-toggle .toggle-icon svg,
.x1techs-theme-toggle .toggle-icon i {
    width: 20px;
    height: 20px;
}

/* Dark mode - show sun */
[data-theme="dark"] .x1techs-theme-toggle .icon-light,
.dark .x1techs-theme-toggle .icon-light {
    display: flex;
}

[data-theme="dark"] .x1techs-theme-toggle .icon-dark,
.dark .x1techs-theme-toggle .icon-dark {
    display: none;
}

/* Light mode - show moon */
[data-theme="light"] .x1techs-theme-toggle .icon-light,
.light .x1techs-theme-toggle .icon-light {
    display: none;
}

[data-theme="light"] .x1techs-theme-toggle .icon-dark,
.light .x1techs-theme-toggle .icon-dark {
    display: flex;
}

/* Icon colors */
.x1techs-theme-toggle .icon-light {
    color: var(--toggle-light-color, #ffffff);
}

.x1techs-theme-toggle .icon-dark {
    color: var(--toggle-dark-color, var(--text));
}


/* ==========================================================================
   8. BODY CLASS SELECTORS
   ========================================================================== */

/* Dark mode body */
body.dark {
    background-color: var(--bg);
    color: var(--text);
}

/* Light mode body */
body.light {
    background-color: var(--bg);
    color: var(--text);
}