:root {
    /* Layout - ALL ORIGINAL VARIABLES PRESERVED */
    --max-width: 1200px;
    --container-padding: 2rem;
    --section-spacing: 100px;
    --border-radius: 12px;
    --scrollbar-width: 20%;
    --scrollbar-left: 0px;

    /* Typography */
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Roboto', sans-serif;

    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-md: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 2rem; /* 32px */
    --font-size-4xl: 2.5rem; /* 40px */
    --font-size-5xl: 3rem; /* 48px */
    --font-size-6xl: 4rem; /* 64px */

    /* Colors - Light Theme (default) - THEME */
    /* Format: --color-name (hex), --color-name-rgb (rgb values with commas) */
    --bg-primary: #ffffff;
    --bg-primary-rgb: 255, 255, 255;
    --bg-secondary: #f3f2ef;
    --bg-secondary-rgb: 243, 242, 239;
    --bg-tertiary: #cfd0d3;
    --bg-tertiary-rgb: 207, 208, 211;
    --bg-primary-transparent: rgba(255, 255, 255, 0.9);
    --bg-hover: #e9e9e7;
    --bg-hover-rgb: 233, 233, 231;

    --text-primary: #191919;
    --text-primary-rgb: 25, 25, 25;
    --text-secondary: #4b5563;
    --text-secondary-rgb: 75, 85, 99;
    --text-tertiary: #666666;
    --text-tertiary-rgb: 102, 102, 102;

    --accent-primary: #0a66c2;
    --accent-primary-rgb: 10, 102, 194;
    --accent-secondary: #0077b5;
    --accent-secondary-rgb: 0, 119, 181;
    --accent-tertiary: #0277bd;
    --accent-tertiary-rgb: 2, 119, 189;

    --success: #057642;
    --success-rgb: 5, 118, 66;
    --info: #0077b5;
    --info-rgb: 0, 119, 181;
    --warning: #c37d16;
    --warning-rgb: 195, 125, 22;
    --danger: #cc1016;
    --danger-rgb: 204, 16, 22;

    /* "On" color variables for light theme */
    --on-primary: #191919;
    --on-primary-rgb: 25, 25, 25;
    --on-secondary: #191919;
    --on-secondary-rgb: 25, 25, 25;
    --on-tertiary: #191919;
    --on-tertiary-rgb: 25, 25, 25;
    --on-accent-primary: #ffffff;
    --on-accent-primary-rgb: 255, 255, 255;
    --on-accent-secondary: #ffffff;
    --on-accent-secondary-rgb: 255, 255, 255;
    --on-accent-tertiary: #ffffff;
    --on-accent-tertiary-rgb: 255, 255, 255;
    --on-success: #ffffff;
    --on-success-rgb: 255, 255, 255;
    --on-info: #ffffff;
    --on-info-rgb: 255, 255, 255;
    --on-warning: #ffffff;
    --on-warning-rgb: 255, 255, 255;
    --on-danger: #ffffff;
    --on-danger-rgb: 255, 255, 255;
    --on-card: #191919;
    --on-card-rgb: 25, 25, 25;
    --on-chip: #191919;
    --on-chip-rgb: 25, 25, 25;

    /* Surface colors for containers */
    --surface-light: #ffffff;
    --surface-light-rgb: 255, 255, 255;
    --surface-medium: #f8f8f8;
    --surface-medium-rgb: 248, 248, 248;
    --surface-dark: #f3f2ef;
    --surface-dark-rgb: 243, 242, 239;
    --on-surface-light: #191919;
    --on-surface-light-rgb: 25, 25, 25;
    --on-surface-medium: #191919;
    --on-surface-medium-rgb: 25, 25, 25;
    --on-surface-dark: #191919;
    --on-surface-dark-rgb: 25, 25, 25;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-color-rgb: 0, 0, 0;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Z-index layers */
    --z-negative: -1;
    --z-normal: 1;
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-modal: 1000;

    /* Additional Spacing/Grid Variables */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */

    /* Border Variables */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 3px;
    --border-color: #e0e0e0;
    --border-color-rgb: 224, 224, 224;
    --border-color-dark: #30363d;
    --border-color-dark-rgb: 48, 54, 61;

    /* Card Specific Variables */
    --card-padding: 1.25rem;
    --card-border-radius: var(--border-radius);
    --card-bg: #F3F2EF;
    --card-bg-rgb: 243, 242, 239;
    --card-hover-transform: translateY(-5px);

    /* Skill Section Specific */
    --skill-icon-size: 60px;
    --skill-grid-gap: 1.5rem;
    --skill-card-min-width: 280px;

    /* Chip/Tag Variables */
    --chip-padding: 0.5rem 1rem;
    --chip-border-radius: 50px;
    --chip-bg: var(--bg-secondary);
    --chip-active-bg: var(--accent-primary);
    --chip-active-color: white;

    /* Progress Indicators */
    --progress-height: 8px;
    --progress-border-radius: 4px;
    --progress-bg: var(--bg-tertiary);

    /* Animation Durations */
    --animation-short: 0.15s;
    --animation-medium: 0.3s;
    --animation-long: 0.5s;

    /* Z-index expanded */
    --z-deep: -10;
    --z-dropdown: 50;
    --z-sticky: 80;
}

/* Dark Theme - THEME */
.dark-theme {
    /* Base colors - dark mode inspired */
    --bg-primary: #1d2226;
    --bg-primary-rgb: 29, 34, 38;
    --bg-secondary: #283339;
    --bg-secondary-rgb: 40, 51, 57;
    --bg-tertiary: #38434f;
    --bg-tertiary-rgb: 56, 67, 79;
    --bg-primary-transparent: rgba(29, 34, 38, 0.9);
    --bg-hover: rgba(10, 102, 194, 0.1);
    --bg-hover-rgb: 10, 102, 194;

    /* Text colors */
    --text-primary: #f5f5f5;
    --text-primary-rgb: 245, 245, 245;
    --text-secondary: #e0e0e0;
    --text-secondary-rgb: 224, 224, 224;
    --text-tertiary: #a0a0a0;
    --text-tertiary-rgb: 160, 160, 160;

    /* Accent colors - blues that pop in dark mode */
    --accent-primary: #70b5f9;
    --accent-primary-rgb: 112, 181, 249;
    --accent-secondary: #a5c8fa;
    --accent-secondary-rgb: 165, 200, 250;
    --accent-tertiary: #c3ddff;
    --accent-tertiary-rgb: 195, 221, 255;

    --success: #0fbb6a; /* Brighter green */
    --success-rgb: 15, 187, 106;
    --info: #39a0db; /* Brighter blue */
    --info-rgb: 57, 160, 219;
    --warning: #f0a030; /* Brighter orange */
    --warning-rgb: 240, 160, 48;
    --danger: #ff4550; /* Brighter red */
    --danger-rgb: 255, 69, 80;

    /* "On" color variables for dark theme */
    --on-primary: #f5f5f5;
    --on-primary-rgb: 245, 245, 245;
    --on-secondary: #f5f5f5;
    --on-secondary-rgb: 245, 245, 245;
    --on-tertiary: #f5f5f5;
    --on-tertiary-rgb: 245, 245, 245;
    --on-accent-primary: #191919;
    --on-accent-primary-rgb: 25, 25, 25;
    --on-accent-secondary: #191919;
    --on-accent-secondary-rgb: 25, 25, 25;
    --on-accent-tertiary: #191919;
    --on-accent-tertiary-rgb: 25, 25, 25;
    --on-success: #ffffff;
    --on-success-rgb: 255, 255, 255;
    --on-info: #ffffff;
    --on-info-rgb: 255, 255, 255;
    --on-warning: #191919;
    --on-warning-rgb: 25, 25, 25;
    --on-danger: #ffffff;
    --on-danger-rgb: 255, 255, 255;
    --on-card: #f5f5f5;
    --on-card-rgb: 245, 245, 245;
    --on-chip: #f5f5f5;
    --on-chip-rgb: 245, 245, 245;

    /* Surface colors for containers in dark mode */
    --surface-light: #283339;
    --surface-light-rgb: 40, 51, 57;
    --surface-medium: #1d2226;
    --surface-medium-rgb: 29, 34, 38;
    --surface-dark: #121719;
    --surface-dark-rgb: 18, 23, 25;
    --on-surface-light: #f5f5f5;
    --on-surface-light-rgb: 245, 245, 245;
    --on-surface-medium: #f5f5f5;
    --on-surface-medium-rgb: 245, 245, 245;
    --on-surface-dark: #f5f5f5;
    --on-surface-dark-rgb: 245, 245, 245;

    /* Additional colors for specific elements */
    --card-bg: #283339;
    --card-bg-rgb: 40, 51, 57;
    --border-color: #38434f;
    --border-color-rgb: 56, 67, 79;

    /* Adjusted shadows for dark mode */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.4);

    /* Dark theme additions */
    --chip-bg: var(--bg-tertiary);
}

/* Media Query Variables - Keeping the same as original */
@media (max-width: 1200px) {
    :root {
        --container-padding: 1.5rem;
        --section-spacing: 80px;
    }
}

@media (max-width: 768px) {
    :root {
        --container-padding: 1rem;
        --section-spacing: 60px;
        --font-size-6xl: 3rem;
        --font-size-5xl: 2.5rem;
        --font-size-4xl: 2rem;
        --skill-card-min-width: 250px;
        --skill-icon-size: 50px;
    }
}

@media (max-width: 480px) {
    :root {
        --container-padding: 0.75rem;
        --section-spacing: 40px;
        --font-size-6xl: 2.5rem;
        --font-size-5xl: 2rem;
        --font-size-4xl: 1.75rem;
        --skill-card-min-width: 100%;
    }
}