:root {
    --bg: #0F1117;
    --surface: #1A1B26;
    --surface-2: #1E2030;
    --border: #2D2F3E;
    --accent: #F97316;
    --accent-soft: rgba(249, 115, 22, 0.14);
    --success: #1D9E75;
    --text: #E2E8F0;
    --text-muted: #94A3B8;
    --danger: #EF4444;
}

[data-theme="light"] {
    --bg: #F8F9FA;
    --surface: #FFFFFF;
    --surface-2: #F1F5F9;
    --border: #E2E8F0;
    --accent: #F97316;
    --accent-soft: rgba(249, 115, 22, 0.12);
    --success: #1D9E75;
    --text: #1A1A2A;
    --text-muted: #4A5568;
    --danger: #DC2626;
}

/* === SHARED HOVER LIFT UTILITY ===
   Apply .lk-card to any clickable card/item across all pages.
   Gives the standard lift + orange border glow on hover. */
.lk-card {
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.lk-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 12%, transparent),
                0 4px 12px color-mix(in srgb, var(--bg) 60%, transparent);
}
.lk-card:active {
    transform: translateY(-1px);
}