:root {
    --deco-red: #C54344;
    --deco-red-muted: #FCE8E8;
    
    /* Light Mode Variables */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --border-color: #e2e8f0;
    --card-bg: #ffffff;
    --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --nav-bg: #ffffff;
    --sidebar-bg: #ffffff;
    --input-bg: #ffffff;
    --modal-backdrop: rgba(10, 21, 35, 0.55);
}

body.dark-mode {
    /* Dark Mode Variables - Neutral Professional Palette */
    --bg-primary: #09090b;
    --bg-secondary: #0c0c0e;
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --border-color: #27272a;
    --card-bg: #141417;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --nav-bg: #09090b;
    --sidebar-bg: #09090b;
    --input-bg: #18181b;
    --deco-red-muted: rgba(197, 67, 68, 0.12);
    --modal-backdrop: rgba(0, 0, 0, 0.8);
}

* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
}
/* Skeleton Loading Shimmer */
@keyframes shimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

.skeleton {
    background: #f6f7f8;
    background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-repeat: no-repeat;
    background-size: 800px 104px;
    display: inline-block;
    position: relative;
    animation: shimmer 1.5s linear infinite forwards;
    border-radius: 4px;
}

body.dark-mode .skeleton {
    background: #1c1c1e;
    background-image: linear-gradient(to right, #1c1c1e 0%, #2c2c2e 20%, #1c1c1e 40%, #1c1c1e 100%);
}

.skeleton-text {
    height: 1rem;
    width: 100%;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 70%; }
.skeleton-text.h3 { height: 1.5rem; width: 60%; margin-bottom: 1rem; }

.skeleton-image {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.skeleton-stat-value {
    height: 2.5rem;
    width: 50px;
    border-radius: 8px;
    margin-top: auto;
}

.skeleton-stat-label {
    height: 0.8rem;
    width: 80%;
    margin-bottom: 1rem;
}

/* Page Entrance Animation */
.fade-in {
    animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.loading-opacity {
    opacity: 0;
    pointer-events: none;
}