:root {
    --primary-color: #d4380d;
    --primary-dark: #d4380d;
    --primary-glow: rgba(212, 56, 13, 0.45);
    --accent-orange: #ff6b35;
    --accent-red: #ff6b35;
    --card-radius: 12px;
    --gallery-columns: 4;
    --photo-info-display: none;

    --bg-darkest: #0a0a0a;
    --bg-dark: #141414;
    --bg-medium: #1f1f1f;
    --bg-card: #2a2a2a;
    --bg-elevated: #353535;
    --text-primary: #e8e8e8;
    --text-secondary: #a8a8a8;
    --text-muted: #6a6a6a;
    --border-color: rgba(226, 232, 240, 0.14);
    --shadow-dark: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-intense: 0 18px 45px rgba(0, 0, 0, 0.55);
}


body {
    color: var(--text-primary);
    background:
        linear-gradient(135deg, var(--bg-dark), var(--bg-darkest)),
        var(--bg-darkest);
}

.photos-grid.grid,
.folders-grid {
    grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr));
}

.photo-card,
.folder-card {
    background: var(--bg-card);
    border-radius: var(--card-radius);
}

.photo-info {
    display: var(--photo-info-display);
}

@media (max-width: 1400px) {
    .photos-grid.grid,
    .folders-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {
    .photos-grid.grid,
    .folders-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .photos-grid.grid,
    .folders-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 400px) {
    .photos-grid.grid,
    .folders-grid {
        grid-template-columns: 1fr;
    }
}