{% extends "main.html" %}

{% block content %}
<div class="error-page">
    <div class="error-content">
        <div class="error-code">404</div>
        <h1 class="error-title">Page not found</h1>
        <p class="error-message">
            The page you're looking for doesn't exist or has been moved.
        </p>
        <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" class="error-button">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M19 12H5M12 19l-7-7 7-7"/>
            </svg>
            Back to home
        </a>
    </div>
</div>

<style>
.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: var(--space-8);
}

.error-content {
    max-width: 400px;
}

.error-code {
    font-size: clamp(6rem, 20vw, 10rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-text-muted) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-4);
}

.error-title {
    font-size: var(--text-2xl);
    font-weight: 600;
    margin: 0 0 var(--space-4);
    color: var(--color-text);
}

.error-message {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-8);
}

.error-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
}

.error-button:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
</style>
{% endblock %}