/* Light Theme Variables */
:root {
    --bg-color: #E9EAEE;
    --card-bg: rgba(255, 255, 255, 0.8);
    --card-hover: rgba(255, 255, 255, 1);
    --border-color: rgba(0, 0, 0, 0.05);
    --text-primary: #1d1d1f;
    --text-secondary: #363636;
    --text-tertiary: #616161;
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --accent-color: #DF0A0A;
    --gap: 16px;
    --radius: 16px;
    --shadow-color: rgba(0, 0, 0, 0.04);
    --project-details-font-size: 0.9rem;
    --project-details-line-height: 0.9.rem;
    --project-details-margin-top: 0.5rem;
    --project-details-max-height: 200px;
    --accent-color-pill: rgba(0, 0, 0, 0.5);
    
    /* Icon Tokens - Easy to adjust globally */
    --icon-size-small: 1.1rem;        /* Theme toggle icons */
    --icon-size-medium: 1.25rem;       /* Skill icons */
    --icon-size-large: 1.5rem;         /* Social/contact icons */
    --icon-size-project: 1.25rem;      /* Project card icons */
    
    /* Icon Color Tokens - Light Mode */
    --icon-color-primary: var(--text-primary);    /* Primary icon color */
    --icon-color-secondary: rgba(0 0 0 / 0.5);  /* Secondary icon color */
    --icon-color-accent: rgba(0, 0, 0, 1);     /* Accent icon color */
    --icon-color-default: var(--text-secondary);  /* Default icon color */
    --icon-color-theme-toggle: var(--text-primary); /* Theme toggle icon color */
    --icon-color-expertise: rgb(150 149 149);     /* Expertise/Skills card icon color */
    --icon-hover-scale: 1.1;          /* Icon hover scale */
    --icon-hover-translate: -2px;     /* Icon hover translate Y */
    --project-icon-size: 40px;         /* Project icon container size */
    --project-icon-bg: rgba(237 22 22 / 0.1);     /* Project icon background */
    --project-icon-bg-hover: rgba(240 72 72 / 0.2); /* Project icon hover background */
}

/* Dark Theme Variables */
[data-theme="dark"] {
    --bg-color: rgb(41 40 44);
    --card-bg: rgba(27 27 30 / 0.7);
    --card-hover: rgba(44, 44, 46, 0.8);
    --border-color: rgba(255 255 255 / 0.07);
    --text-primary: #f5f5f7;
    --text-secondary: #BBBBBB;
    --text-tertiary: #6b6b6b;
    --shadow-color: rgba(0, 0, 0, 0.4);
    
    /* Icon Color Tokens - Dark Mode */
    --icon-color-primary: var(--text-primary);    /* Primary icon color */
    --icon-color-secondary: var(--text-secondary);  /* Secondary icon color */
    --icon-color-accent: rgba(255, 255, 255, 0.5);     /* Accent icon color */
    --icon-color-default: var(--text-secondary);  /* Default icon color */
    --icon-color-theme-toggle: var(--text-primary); /* Theme toggle icon color */
    --icon-color-expertise: rgba(255, 255, 255, 0.5);     /* Expertise/Skills card icon color */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    font-family: 'Instrument Sans', sans-serif;
    background-color: var(--bg-color);

    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.container {
    width: 100%;
    max-width: 1290px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    row-gap: var(--gap);
    column-gap: var(--gap);
    margin: 0 auto;
}


h1 { 
    font-size: 3rem !important; 
    margin-bottom: .25rem; 
    font-weight: 800 !important;
    color: var(--text-primary);
    line-height: 3.5rem !important;

}


/* Typography */
h2 { 
    font-size: 1.13rem !important; 
    margin-bottom: .25rem; 
    font-weight: 600 !important; /* font-semibold equivalent */
    color: var(--text-primary);
    line-height: 1.3rem;

}

h3 { 
    font-size: 1.1rem; 
    margin-bottom: .1rem; 
    font-weight: 600 !important; /* font-semibold equivalent */
    color: var(--text-primary);
    line-height: 1.4rem;
}

h4 { 
    font-size: 0.9rem; 
    margin-bottom: 0rem; 
    color: var(--text-tertiary);
}


p { 
    font-size: 0.90rem; 
    color: var(--text-secondary);

}

.text-gradient {
    background: var(--accent-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Glassmorphism Card Styles */
.bento-item {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 var(--shadow-color);
    margin: 0;
}

.bento-item:hover {
    background: var(--card-hover);
    border-color: var(--border-color);
    box-shadow: 0 12px 40px 0 var(--shadow-color);
}

/* Grid Spans */
.span-2x2 {
    grid-column: span 2;
    grid-row: span 2;
}

.span-1x2 {
    grid-row: span 2;
}

.span-1x4 {
    grid-row: span 4;
}



#card-myprofile {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    height: 105% !important;
    position: relative;
}

/* Profile Card Theme Toggle */
.profile-theme-toggle {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 20;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.01);
 
    transition: all 0.3s ease;
    padding: 0;
    margin: 0;
}

.profile-theme-toggle:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    
}

.profile-theme-toggle i {
    font-size: var(--icon-size-small);
    color: var(--icon-color-primary);
    transition: transform 0.3s ease;
}

.profile-theme-toggle:hover i {
    transform: rotate(15deg);
}

[data-theme="dark"] .profile-theme-toggle {
    background: rgba(28 28 29 / 0.9);
    border: 0px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .profile-theme-toggle:hover {
    background: rgba(44, 44, 46, 1);
}

.card-myprofile-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex: 1;
    justify-content: center;
}

#card-myprofile .profile-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

#card-myprofile h3 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

#card-myprofile p {
    margin-top: 0.5rem;
    line-height: 1.4;
}




#card-profile-detail {
    grid-column: 1;
    grid-row: 3;
}

#ecart-card {
    grid-column: 1;
    grid-row: 4;
}

/* Featured Project */
.featured-project {
    padding: 0;
    cursor: default;
    position: relative;
}

/* Featured Card Theme Toggle */
.featured-theme-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 20;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    padding: 0;
    margin: 0;
}

.featured-theme-toggle:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.featured-theme-toggle i {
    font-size: var(--icon-size-small);
    color: var(--icon-color-theme-toggle);
    transition: transform 0.3s ease;
}

.featured-theme-toggle:hover i {
    transform: rotate(15deg);
}

[data-theme="dark"] .featured-theme-toggle {
    background: rgba(31, 31, 32, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .featured-theme-toggle:hover {
    background: rgba(44, 44, 46, 1);
}

/* Paragraph Card */
.paragraph-card {
    justify-content: flex-start;
}

.paragraph-card p {
    line-height: 1.4;
    margin-bottom: 1rem;
}

.paragraph-card p:last-child {
    margin-bottom: 0;
}

.featured-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.featured-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 0;
}

.featured-slide.active {
    opacity: 1;
    z-index: 1;
}

.featured-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    opacity: 0.6;
    z-index: 0;
}

.featured-project:hover .featured-bg {
    transform: scale(1.05);
    opacity: 0.4;
}

.featured-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0));
    color: #ffffff;
}

.featured-content h2 {
    color: #ffffff;
}

.featured-content p {
    color: rgba(255, 255, 255, 0.8);
}

/* Slider Navigation Dots */
.slider-dots {
    position: absolute;
    bottom: 0.4rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
    padding: 0.4rem 0.6rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
    min-width: fit-content;
    pointer-events: auto;
    margin: 0 auto;
    /* Additional positioning options - uncomment to customize */
    /* right: 2rem; */ /* Position from right instead of center */
    /* top: 1rem; */ /* Position from top instead of bottom */
    /* left: auto; */ /* Remove left positioning */
    /* transform: none; */ /* Remove centering transform */
}


.slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
}

.slider-dot:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

.slider-dot.active {
    background: rgba(255, 255, 255, 1);
    width: 24px;
    border-radius: 4px;
}

.featured-tag {
    background-color: var(--accent-color-pill);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    width: fit-content;
    margin-bottom: 0.5rem;
}

/* About Me */
.about-me {
    align-items: center;
    text-align: center;
    justify-content: center;
}

.profile-img {
    width: 80px;
margin-top: 0.5rem;
    object-fit: cover;
    margin-bottom: 0.5rem;
  
}

/* Skills */
.skills-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 1rem;
}

.skill-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.skill-item:hover {
    color: var(--text-primary);
}

.skill-item i {
    font-size: var(--icon-size-medium);
    color: var(--icon-color-expertise);
    transition: color 0.3s ease;
}

.skill-item:hover i {
    color: var(--icon-color-primary);
}

/* Project Cards */
.project-card {
    justify-content: space-between;
    position: relative;
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    transform: translateY(-4px);
}

.project-icon {
    width: var(--project-icon-size);
    height: var(--project-icon-size);
    background: var(--project-icon-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.project-icon i {
    font-size: var(--icon-size-project);
    color: var(--icon-color-accent);
}

.project-card:hover .project-icon {
    background: var(--project-icon-bg-hover);
    transform: scale(var(--icon-hover-scale));
}

.project-details {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.project-details p {
    font-size: var(--project-details-font-size);
    line-height: var(--project-details-line-height);
    color: var(--text-secondary);
}

.project-card:hover .project-details,
.project-card.expanded .project-details {
    opacity: 1;
    max-height: var(--project-details-max-height);
    margin-top: var(--project-details-margin-top);
}

.project-link {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    opacity: 0;
    transform: rotate(-45deg);
    transition: all 0.3s ease;
    color: var(--icon-color-accent);
    font-size: var(--icon-size-medium);
}

.project-card:hover .project-link,
.project-card.expanded .project-link {
    opacity: 1;
    transform: rotate(0);
}

/* Contact */
#contact-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-links {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: auto;
}

.social-btn {
    color: var(--icon-color-default);
    font-size: var(--icon-size-large);
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-btn:hover {
    color: var(--icon-color-accent);
    transform: translateY(var(--icon-hover-translate)) scale(var(--icon-hover-scale));
}

/* Theme Toggle */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1rem;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    background: var(--card-hover);
    transform: scale(1.05);
}

.theme-toggle i {
    font-size: var(--icon-size-large);
    color: var(--icon-color-accent);
    transition: transform 0.3s ease;
}

.theme-toggle:hover i {
    transform: rotate(15deg);
}

/* Logo Theme Toggle */
.logo-container {
    position: relative;
}

.logo-light-mode {
    display: block;
}

.logo-dark-mode {
    display: none;
}

[data-theme="dark"] .logo-light-mode {
    display: none;
}

[data-theme="dark"] .logo-dark-mode {
    display: block;
}

[data-theme="light"] .logo-light-mode {
    display: block;
}

[data-theme="light"] .logo-dark-mode {
    display: none;
}



/* Animations */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.container > * {
    animation: fadeIn 0.6s ease-out forwards;
    opacity: 0;
}

.container > *:nth-child(1) { animation-delay: 0.1s; }
.container > *:nth-child(2) { animation-delay: 0.2s; }
.container > *:nth-child(3) { animation-delay: 0.3s; }
.container > *:nth-child(4) { animation-delay: 0.4s; }
.container > *:nth-child(5) { animation-delay: 0.5s; }
.container > *:nth-child(6) { animation-delay: 0.6s; }
.container > *:nth-child(7) { animation-delay: 0.7s; }
.container > *:nth-child(8) { animation-delay: 0.8s; }
.container > *:nth-child(9) { animation-delay: 0.9s; }
.container > *:nth-child(10) { animation-delay: 1.0s; }

/* Mobile Responsive */
@media (max-width: 1024px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap);
        row-gap: var(--gap);
        column-gap: var(--gap);
    }
    
    /* Fix featured card height on iPad/tablet */
    .featured-project {
        min-height: 400px;
    }
    
    /* Ensure all cards have no margins */
    .bento-item {
        margin: 0;
    }
}

@media (max-width: 768px) {
    body {
        padding: 1rem;
    }

    .container {
        grid-template-columns: 1fr;
        gap: var(--gap);
        row-gap: var(--gap);
    }
    
    .span-2x2, .span-1x2, .span-1x4 {
        grid-column: auto;
        grid-row: auto;
    }

    /* Make profile cards equal height on mobile */
    #card-profile-detail,
    #contact-card {
        height: 300px;
        min-height: 300px;
        max-height: 300px;
        display: flex;
        flex-direction: column;
        margin: 0;
    }
    
    #card-myprofile {
        height: 105%;
        min-height: 300px;
        max-height: 300px;
        display: flex;
        flex-direction: column;
        margin: 0;
        justify-content: center;
    }
    
    #card-profile-detail {
        justify-content: space-between;
    }
    
    #contact-card {
        justify-content: space-between;
    }
    
    /* Ensure all cards have no margins that interfere with gap */
    .bento-item {
        margin: 0;
    }

    /* Order: Paragraph, Featured, About, Theme Toggle, others */
    .paragraph-card { order: -3; }
    .featured-project { order: -2; height: 300px; }
    .about-me { order: -1; }
    .theme-toggle { order: 0; }
}