/* Light Theme */
:root {
    --projects-background: #F5F5F5;
    --project-card-background: #FFFFFF;
    --project-text-color: #2C2C2C;
    --project-button-background: #EFEFEF;
    --project-button-text: #424242;
    --project-button-hover-background: #E0E0E0;
    --project-button-hover-text: #1A1A1A;
    --design-card-background: #FFFFFF;
    --design-card-border: #E0E0E0;
    --design-card-border-radius: var(--radius-lg);
}

/* Dark Theme */
[data-theme="dark"] {
    --projects-background: #1A1A1A;
    --project-card-background: #242424;
    --project-text-color: #E0E0E0;
    --project-button-background: #2C2C2C;
    --project-button-text: #E0E0E0;
    --project-button-hover-background: #383838;
    --project-button-hover-text: #FFFFFF;
    --design-card-background: #242424;
    --design-card-border: #383838;
    --design-card-border-radius: var(--radius-lg);
}

/* Project Section Styles */
.projects-section {
    background-color: var(--projects-background);
    padding: 2rem;
    margin-top: 2rem;
    border-radius: var(--radius-lg);
}

.project-card {
    background-color: var(--project-card-background);
    color: var(--project-text-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all 0.3s var(--spring-easing);
    box-shadow: var(--elevation-1);
}

.project-card:hover {
    box-shadow: var(--elevation-3);
    transform: translateY(-4px);
}

.project-button {
    background-color: var(--project-button-background);
    color: var(--project-button-text);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all 0.3s var(--spring-easing);
}

.project-button:hover {
    background-color: var(--project-button-hover-background);
    color: var(--project-button-hover-text);
}

/* Design Card Styles */
.design-card {
    background-color: var(--design-card-background);
    border: 1px solid var(--design-card-border);
    border-radius: var(--design-card-border-radius);
    padding: 1.5rem;
    margin: 1rem 0;
    transition: all 0.3s var(--spring-easing);
    box-shadow: var(--elevation-1);
}

.design-card:hover {
    box-shadow: var(--elevation-2);
    border-color: var(--md-sys-color-primary);
}