:root {
    /* === CORE SITE COLORS === */
    --main-text-color: #141529;
    --hyperlink-color: #28727b;
    --accent-text-color: #56104f;
    --small-text-color: #ec7c32;
    --top-bar-color: #ec7c32;
    --top-bar-hyperlink-color: #f7f0f5;
    --background-color: #f7f0f5;
    
    /* === LAYOUT === */
    --content-max-width: 1200px;
    --top-bar-height: 80px;
    --top-bar-mobile-height: 120px;
    
    /* === SPACING === */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    
    /* === TYPOGRAPHY === */
    --font-family-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-small: 0.9rem;
    --font-size-body: 1rem;
    --font-size-large: 1.2rem;
    --font-size-title: 2.5rem;
    --font-size-title-mobile: 2rem;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.8;
    
    /* === INTERACTIVE GRAPH COLORS === */
    --graph-bg-color: #000000;
    --graph-text-color: #ffffff;
    --graph-text-secondary: rgba(255, 255, 255, 0.8);
    --graph-link-color: #ffffff;
    --graph-link-opacity: 0.6;
    --graph-node-stroke: #ffffff;
    
    /* Graph Node Colors */
    --graph-color-primary: #ec7c32;    /* Orange - main projects */
    --graph-color-secondary: #28727b;  /* Teal - demos/versions */
    --graph-color-tertiary: #56104f;   /* Purple - code/docs */
    --graph-color-quaternary: #141529; /* Dark blue - additional */
    
    /* === INTERACTIVE GRAPH DIMENSIONS === */
    --graph-container-min-height: 600px;
    --graph-container-min-height-mobile: 400px;
    --graph-container-padding: 2rem;
    --graph-container-padding-mobile: 1rem;

    /* Graph Scrolling and Panning */
    --graph-edge-scroll-threshold: 50px;
    --graph-edge-scroll-speed: 2px;
    --graph-pan-boundary-margin: 50px;
    --graph-scroll-fps: 60;

    /* Graph Node Sizes */
    --graph-node-size: 80px;
    --graph-node-size-mobile: 60px;
    --graph-node-relative-radius: 0.9;
    --graph-node-stroke-width: 4px;
    --graph-node-stroke-width-hover: 6px;
    --graph-node-stroke-width-mobile: 2px;
    
    /* Graph Link Properties */
    --graph-link-width: 4px;
    --graph-link-distance: 140px;
    --graph-collision-radius: 40px;
    --graph-force-strength: -150;
    
    /* === ANIMATIONS & TRANSITIONS === */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;
    --transition-ease: ease;
    --animation-duration-float: 100ms;
    --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* === SHADOWS === */
    --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-heavy: 0 10px 30px rgba(0, 0, 0, 0.2);
    --shadow-graph-node: 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-graph-link: 0 2px 4px rgba(0, 0, 0, 0.2);
    
    /* === BORDER RADIUS === */
    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 15px;
    --radius-xl: 20px;
    
    /* === OPACITY VALUES === */
    --opacity-transparent: 0.7;
    --opacity-nontransparent: 1;
    
    /* === Z-INDEX LAYERS === */
    --z-index-base: 1;
    --z-index-topbar: 10;
    
    /* === HERO SECTION === */
    --hero-photo-size: 300px;
    --hero-photo-size-mobile: 200px;
    --hero-min-height: 350px;
    --hero-gap: 3rem;
    --hero-gap-mobile: 2rem;
    
    /* === GRAPH RESPONSIVE SCALING === */
    --graph-title-size: 16px;
    --graph-text-size: 12px;
    --graph-text-size-mobile: 10px;
    --graph-icon-size: 30px;
    --graph-icon-size-mobile: 20px;
    
    /* === HOVER STATES === */
    --hover-brightness: 1.1;
    --hover-scale: 1.05;
}

/* === THEME VARIATIONS === */
/* Light theme (default) */
:root {
    --theme-bg: var(--background-color);
    --theme-text: var(--main-text-color);
    --theme-accent: var(--accent-text-color);
}


/* === COMPONENT-SPECIFIC OVERRIDES === */
/* For portfolio pages */
:root[data-page="portfolio"] {
    --graph-color-primary: #2196f3;
    --graph-color-secondary: #4caf50;
    --graph-color-tertiary: #ff9800;
}

/* For about pages */
:root[data-page="about"] {
    --graph-color-primary: #9c27b0;
    --graph-color-secondary: #3f51b5;
    --graph-color-tertiary: #00bcd4;
}

/* === PRINT STYLES === */
@media print {
    :root {
        --shadow-light: none;
        --shadow-medium: none;
        --shadow-heavy: none;
        --transition-fast: none;
        --transition-normal: none;
        --transition-slow: none;
    }
}