/* ---------- ROOT VARIABLES ---------- */
:root {
    /* Colors */
    --bg: #050508;
    --bg-secondary: #0a0a12;
    --bg-tertiary: #0f0f1a;
    --text: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.75);
    --text-dim: rgba(255, 255, 255, 0.55);
    
    /* Accent Colors */
    --accent: #00d4ff;
    --accent-purple: #7c3aed;
    --accent-pink: #ec4899;
    --accent-green: #10b981;
    --accent-yellow: #f59e0b;
    --accent-orange: #f97316;
    --accent-blue: #3b82f6;
    --accent-cyan: #00d4ff;
    
    /* Gradients */
    --gradient-cyan: linear-gradient(135deg, var(--accent), var(--accent-blue));
    --gradient-purple: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
    --gradient-warm: linear-gradient(135deg, var(--accent-orange), var(--accent-yellow));
    --gradient-text: linear-gradient(135deg, #fff, var(--accent));
    --gradient-hero: linear-gradient(135deg, #fff, var(--accent));
    --gradient-stat: linear-gradient(135deg, var(--accent), var(--accent-purple));
    --gradient-section-title: linear-gradient(135deg, #fff, var(--text-muted));
    --gradient-cta-title: linear-gradient(135deg, #fff, var(--accent));
    --gradient-btn-primary: linear-gradient(135deg, var(--accent), var(--accent-purple));
    --gradient-cta-bg: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(124, 58, 237, 0.08));
    --gradient-bg-overlay: radial-gradient(circle at 30% 20%, rgba(0, 212, 255, 0.04), transparent 60%), radial-gradient(circle at 80% 70%, rgba(124, 58, 237, 0.03), transparent 50%);
    --gradient-cta-radial: radial-gradient(circle, rgba(0, 212, 255, 0.05), transparent 70%);
    
    /* Glass Effects */
    --liquid-bg: rgba(255, 255, 255, 0.06);
    --liquid-bg-hover: rgba(255, 255, 255, 0.1);
    --liquid-bg-card: rgba(255, 255, 255, 0.06);
    --liquid-bg-modal: rgba(255, 255, 255, 0.06);
    --liquid-bg-hero: rgba(255, 255, 255, 0.06);
    --liquid-border: rgba(255, 255, 255, 0.15);
    --liquid-border-light: rgba(255, 255, 255, 0.25);
    --liquid-border-card: rgba(255, 255, 255, 0.15);
    --liquid-border-modal: rgba(255, 255, 255, 0.25);
    --liquid-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --liquid-blur: blur(12px) saturate(180%);
    --liquid-blur-strong: blur(20px) saturate(200%);
    --liquid-blur-card: blur(12px) saturate(180%);
    --liquid-blur-modal: blur(20px) saturate(200%);
    --liquid-inset-light: inset 0 1px 1px rgba(255, 255, 255, 0.1);
    --liquid-inset-card: inset 0 1px 1px rgba(255, 255, 255, 0.1);
    --liquid-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3);
    --accent-glow: 0 0 20px rgba(0, 212, 255, 0.4);
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --dyslexic-font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif;
    --line-height: 1.6;
    --body-font-size: 16px;
    
    /* Sidebar */
    --sidebar-width: 72px;
    --sidebar-bg: rgba(5, 5, 8, 0.92);
    --sidebar-border: var(--liquid-border);
    --sidebar-padding: 20px 8px;
    --sidebar-gap: 2px;
    --sidebar-logo-mb: 24px;
    --sidebar-logo-pb: 16px;
    --sidebar-nav-padding: 4px 0;
    --sidebar-bottom-pt: 16px;
    --sidebar-social-gap: 6px;
    
    /* Sidebar Logo */
    --sidebar-logo-font-size: 18px;
    --sidebar-logo-weight: 700;
    --sidebar-logo-letter-spacing: 0.5px;
    --sidebar-logo-color: var(--accent);
    
    /* Sidebar Nav */
    --sidebar-nav-font-size: 9px;
    --sidebar-nav-weight: 500;
    --sidebar-nav-padding: 10px 4px;
    --sidebar-nav-border-radius: 10px;
    --sidebar-nav-min-height: 56px;
    --sidebar-nav-gap: 2px;
    --sidebar-nav-icon-size: 20px;
    --sidebar-nav-label-size: 8px;
    
    /* Sidebar Social */
    --sidebar-social-size: 16px;
    --sidebar-social-width: 32px;
    --sidebar-social-height: 32px;
    --sidebar-social-radius: 8px;
    --sidebar-social-bg: rgba(255, 255, 255, 0.04);
    
    /* Main Content */
    --main-content-padding: 16px;
    --main-content-padding-left: calc(var(--sidebar-width) + 16px);
    --container-max-width: 100%;
    
    /* Header */
    --header-padding: 12px 16px;
    --header-mb: 24px;
    --header-radius: 16px;
    --header-bg: var(--liquid-bg);
    --header-border: var(--liquid-border);
    --header-shadow: var(--liquid-shadow), var(--liquid-inset-light);
    --header-gap: 12px;
    --header-actions-gap: 8px;
    
    /* Buttons */
    --btn-icon-size: 44px;
    --btn-icon-radius: 12px;
    --btn-icon-bg: rgba(255, 255, 255, 0.06);
    --btn-icon-border: rgba(255, 255, 255, 0.08);
    --btn-icon-color: var(--text-muted);
    --btn-icon-font-size: 17px;
    
    --btn-padding: 12px 24px;
    --btn-radius: 12px;
    --btn-font-size: 15px;
    --btn-font-weight: 600;
    --btn-gap: 8px;
    --btn-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    
    --btn-primary-bg: var(--gradient-btn-primary);
    --btn-primary-color: white;
    --btn-primary-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
    --btn-primary-hover-shadow: 0 6px 25px rgba(0, 212, 255, 0.5);
    
    --btn-secondary-bg: rgba(255, 255, 255, 0.08);
    --btn-secondary-border: var(--liquid-border);
    --btn-secondary-color: var(--text);
    
    /* Hero */
    --hero-mb: 32px;
    --hero-padding: 32px 20px;
    --hero-radius: 20px;
    --hero-bg: var(--liquid-bg);
    --hero-border: var(--liquid-border);
    --hero-shadow: var(--liquid-shadow), var(--liquid-inset-light);
    --hero-scroll-mt: 80px;
    --hero-badge-mb: 16px;
    
    --badge-bg: rgba(0, 212, 255, 0.12);
    --badge-border: rgba(0, 212, 255, 0.2);
    --badge-padding: 6px 14px;
    --badge-radius: 24px;
    --badge-font-size: 12px;
    --badge-color: var(--accent);
    
    --hero-title-size: 32px;
    --hero-title-weight: 700;
    --hero-title-mb: 16px;
    --hero-title-max-width: 100%;
    --hero-title-grad: var(--gradient-hero);
    
    --hero-desc-size: 17px;
    --hero-desc-color: var(--text-muted);
    --hero-desc-mb: 20px;
    
    --btn-group-gap: 12px;
    --btn-group-direction: column;
    
    /* Stats */
    --hero-stats-gap: 24px;
    --hero-stats-mt: 24px;
    --hero-stats-pt: 20px;
    --hero-stats-border: var(--liquid-border);
    --stat-min-width: 80px;
    --stat-gap: 4px;
    --stat-number-size: 24px;
    --stat-number-weight: 700;
    --stat-number-grad: var(--gradient-stat);
    --stat-label-size: 12px;
    --stat-label-color: var(--text-muted);
    
    /* Section Headers */
    --section-header-direction: column;
    --section-header-align: flex-start;
    --section-header-gap: 8px;
    --section-header-mb: 20px;
    --section-header-scroll-mt: 80px;
    --section-title-size: 22px;
    --section-title-weight: 600;
    --section-title-grad: var(--gradient-section-title);
    --section-title-after-width: 40px;
    --section-title-after-height: 3px;
    --section-title-after-bg: linear-gradient(90deg, var(--accent), var(--accent-purple));
    --section-title-after-radius: 3px;
    --section-title-after-bottom: -8px;
    
    --section-link-color: var(--text-muted);
    --section-link-font-size: 14px;
    --section-link-padding: 6px 14px;
    --section-link-radius: 10px;
    --section-link-bg: rgba(255, 255, 255, 0.04);
    --section-link-border: rgba(255, 255, 255, 0.06);
    
    /* Grids */
    --grid-gap: 16px;
    --grid-mb: 32px;
    --grid-scroll-mt: 80px;
    --grid-sm-gap: 12px;
    --grid-sm-cols: repeat(2, 1fr);
    
    /* Cards - Featured */
    --featured-card-radius: 16px;
    --featured-card-bg: var(--liquid-bg);
    --featured-card-border: var(--liquid-border);
    --featured-card-hover-transform: translateY(-4px);
    --featured-image-height: 200px;
    --featured-content-padding: 16px;
    --featured-tag-size: 11px;
    --featured-tag-color: var(--accent);
    --featured-tag-mb: 8px;
    --featured-title-size: 18px;
    --featured-title-mb: 8px;
    --featured-desc-size: 14px;
    --featured-desc-color: var(--text-muted);
    --featured-desc-mb: 12px;
    
    /* Cards - Skill */
    --skill-card-radius: 12px;
    --skill-card-padding: 16px;
    --skill-card-bg: var(--liquid-bg);
    --skill-card-border: var(--liquid-border);
    --skill-icon-size: 24px;
    --skill-icon-mb: 8px;
    --skill-name-size: 14px;
    --skill-name-mb: 4px;
    --skill-desc-size: 11px;
    --skill-desc-color: var(--text-muted);
    
    /* Cards - Service */
    --service-card-radius: 16px;
    --service-card-padding: 20px;
    --service-card-bg: var(--liquid-bg);
    --service-card-border: var(--liquid-border);
    --service-icon-size: 28px;
    --service-icon-width: 60px;
    --service-icon-height: 60px;
    --service-icon-radius: 14px;
    --service-icon-mb: 12px;
    --service-title-size: 17px;
    --service-title-mb: 8px;
    --service-desc-size: 14px;
    --service-desc-color: var(--text-muted);
    --service-desc-mb: 12px;
    
    /* Cards - Client */
    --client-card-radius: 12px;
    --client-card-padding: 16px;
    --client-card-bg: var(--liquid-bg);
    --client-card-border: var(--liquid-border);
    --client-logo-max-width: 80px;
    --client-logo-opacity: 0.7;
    --client-name-size: 14px;
    --client-name-mt: 12px;
    --client-name-mb: 4px;
    --client-desc-size: 11px;
    --client-desc-color: var(--text-muted);
    
    /* Cards - Blog */
    --blog-card-radius: 16px;
    --blog-card-bg: var(--liquid-bg);
    --blog-card-border: var(--liquid-border);
    --blog-image-height: 180px;
    --blog-content-padding: 16px;
    --blog-date-size: 11px;
    --blog-date-color: var(--accent);
    --blog-date-mb: 8px;
    --blog-date-padding: 4px 12px;
    --blog-date-radius: 8px;
    --blog-date-bg: rgba(0, 212, 255, 0.1);
    --blog-title-size: 17px;
    --blog-title-mb: 8px;
    --blog-title-mt: 8px;
    --blog-desc-size: 14px;
    --blog-desc-color: var(--text-muted);
    --blog-desc-mb: 12px;
    
    /* FAQ */
    --faq-item-radius: 16px;
    --faq-item-padding: 16px;
    --faq-item-bg: var(--liquid-bg);
    --faq-item-border: var(--liquid-border);
    --faq-question-gap: 12px;
    --faq-question-size: 15px;
    --faq-question-weight: 600;
    --faq-icon-size: 17px;
    --faq-icon-color: var(--accent);
    --faq-answer-mt: 12px;
    --faq-answer-pt: 12px;
    --faq-answer-size: 14px;
    --faq-answer-color: var(--text-muted);
    --faq-answer-border: var(--liquid-border);
    
    /* Card Links */
    --card-link-color: var(--accent);
    --card-link-size: 14px;
    --card-link-weight: 500;
    --card-link-gap: 4px;
    --card-link-hover-gap: 8px;
    --card-link-hover-color: var(--accent-purple);
    
    /* CTA */
    --cta-margin: 24px 0;
    --cta-padding: 32px 20px;
    --cta-radius: 16px;
    --cta-bg: var(--gradient-cta-bg);
    --cta-border: rgba(0, 212, 255, 0.2);
    --cta-title-size: 22px;
    --cta-title-mb: 8px;
    --cta-title-grad: var(--gradient-cta-title);
    --cta-desc-color: var(--text-muted);
    --cta-desc-mb: 16px;
    --cta-desc-size: 15px;
    
    /* Footer */
    --footer-pt: 20px;
    --footer-mt: 24px;
    --footer-border: var(--liquid-border);
    --footer-container-gap: 16px;
    --footer-logo-size: 22px;
    --footer-logo-color: var(--accent);
    --footer-social-size: 17px;
    --footer-social-width: 36px;
    --footer-social-height: 36px;
    --footer-social-radius: 10px;
    --footer-social-bg: rgba(255, 255, 255, 0.05);
    --footer-nav-gap: 12px;
    --footer-nav-size: 13px;
    --footer-nav-padding: 4px 12px;
    --footer-nav-radius: 8px;
    --footer-nav-bg: rgba(255, 255, 255, 0.04);
    --footer-bottom-pt: 16px;
    --footer-bottom-mt: 16px;
    --footer-bottom-border: var(--liquid-border);
    --footer-bottom-size: 12px;
    --footer-bottom-color: var(--text-dim);
    
    /* Modals */
    --modal-z-index: 2000;
    --modal-bg: rgba(0, 0, 0, 0.4);
    --modal-blur: blur(20px) saturate(180%);
    --modal-radius: 16px;
    --modal-padding: 24px 20px;
    --modal-width: 92%;
    --modal-max-height: 85vh;
    --modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), var(--liquid-inset-light);
    --modal-content-bg: var(--liquid-bg);
    --modal-content-border: var(--liquid-border-light);
    --modal-header-mb: 16px;
    --modal-header-pb: 12px;
    --modal-header-border: var(--liquid-border);
    --modal-header-size: 18px;
    --modal-header-grad: var(--gradient-hero);
    --modal-close-size: 44px;
    --modal-close-radius: 12px;
    --modal-close-bg: rgba(255, 255, 255, 0.08);
    --modal-close-border: var(--liquid-border);
    --modal-close-color: var(--text-muted);
    
    /* Forms */
    --form-group-mb: 16px;
    --form-label-size: 14px;
    --form-label-color: var(--text-muted);
    --form-label-mb: 6px;
    --form-input-padding: 12px;
    --form-input-radius: 10px;
    --form-input-bg: rgba(0, 0, 0, 0.4);
    --form-input-border: var(--liquid-border);
    --form-input-color: var(--text);
    --form-input-size: 15px;
    --form-input-focus-border: var(--accent);
    --form-input-focus-bg: rgba(0, 0, 0, 0.6);
    --form-input-focus-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
    --form-textarea-min-height: 100px;
    --form-select-bg: #1a1a2a;
    --form-row-cols: 1fr;
    
    /* Submit Status */
    --submit-mt: 16px;
    --submit-padding: 12px;
    --submit-radius: 10px;
    --submit-size: 13px;
    --submit-success-bg: rgba(16, 185, 129, 0.12);
    --submit-success-border: #10b981;
    --submit-success-color: #10b981;
    --submit-error-bg: rgba(239, 68, 68, 0.12);
    --submit-error-border: #ef4444;
    --submit-error-color: #ef4444;
    
    /* Settings */
    --setting-padding: 16px 0;
    --setting-border: var(--liquid-border);
    --setting-label-size: 14px;
    --setting-desc-size: 11px;
    --setting-desc-color: var(--text-muted);
    --setting-desc-mt: 4px;
    --toggle-width: 50px;
    --toggle-height: 28px;
    --toggle-radius: 30px;
    --toggle-bg: rgba(255, 255, 255, 0.12);
    --toggle-border: rgba(255, 255, 255, 0.08);
    --toggle-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(255, 255, 255, 0.1);
    --toggle-active-bg: var(--accent);
    --toggle-active-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
    --toggle-dot-size: 22px;
    --toggle-dot-bg: white;
    --toggle-dot-top: 2px;
    --toggle-dot-left: 2px;
    --toggle-dot-translate: 22px;
    
    --reset-btn-padding: 12px 16px;
    --reset-btn-radius: 10px;
    --reset-btn-size: 14px;
    --reset-btn-mt: 16px;
    --reset-btn-bg: rgba(255, 255, 255, 0.06);
    --reset-btn-border: var(--liquid-border);
    --reset-btn-color: var(--text);
    
    /* Search */
    --search-results-mt: 12px;
    --search-results-max-height: 300px;
    --search-item-padding: 12px;
    --search-item-border: var(--liquid-border);
    --search-item-title-size: 14px;
    --search-item-title-mb: 4px;
    --search-item-title-color: var(--accent);
    --search-item-desc-size: 12px;
    --search-item-desc-color: var(--text-muted);
    
    /* Transitions */
    --transition-fast: 0.2s;
    --transition-med: 0.3s;
    --transition-slow: 0.5s;
    --transition-bezier: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Animation */
    --fade-up-distance: 30px;
    --fade-up-duration: 0.5s;
    
    /* Accessibility */
    --high-contrast-bg: #000000;
    --high-contrast-liquid-bg: rgba(0, 0, 0, 0.7);
    --high-contrast-text: #ffffff;
    --high-contrast-text-muted: #ffff00;
    --high-contrast-text-dim: #00ff00;
    --high-contrast-accent: #ffff00;
    --high-contrast-border: #ffffff;
    --high-contrast-border-light: #ffff00;
    
    --large-text-size: 20px;
    --large-text-hero-title: 40px;
    --large-text-hero-desc: 20px;
    --large-text-section-title: 28px;
    --large-text-stat-number: 30px;
    --large-text-btn: 18px;
    --large-text-btn-padding: 14px 28px;
    
    /* Scrollbar */
    --scrollbar-width: 8px;
    --scrollbar-height: 8px;
    --scrollbar-track-bg: rgba(255, 255, 255, 0.03);
    --scrollbar-track-radius: 4px;
    --scrollbar-thumb-bg: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-radius: 4px;
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.35);
    --scrollbar-color: rgba(255, 255, 255, 0.2);
    --scrollbar-track-color: rgba(255, 255, 255, 0.03);
}