<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}ombra{% endblock %}</title>

    <!-- Tailwind CSS (pre-built, included in package) -->
    <link rel="stylesheet" href="/static/css/styles.css?v=8">

    <!-- Alpine.js x-cloak: hide elements until Alpine is ready -->
    <style>
        [x-cloak] { display: none !important; }
        
        .brand-text {
            font-size: 1.8rem;
            background: linear-gradient(135deg, #7aa2f7 0%, #bb9af7 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            /* Elegant shadow/glow effect */
            filter: drop-shadow(0 4px 12px rgba(122, 162, 247, 0.3));
            transition: all 0.3s ease;
        }
        
        .brand-text:hover {
            filter: drop-shadow(0 6px 16px rgba(187, 154, 247, 0.4));
            transform: translateY(-1px);
        }
    </style>

    <!-- Alpine.js for reactivity -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    {% block extra_head %}{% endblock %}
</head>
<body class="bg-terminal-bg-dark text-terminal-text font-sans leading-normal h-screen flex flex-col overflow-hidden selection:bg-accent-blue/30">
    <!-- Header -->
    <header class="flex-shrink-0 pt-6 px-8 pb-4">
        <div class="flex items-center justify-between">
            <h1 class="brand-text font-bold tracking-tight cursor-default">Ombra</h1>
        </div>
    </header>

    <!-- Main Content -->
    <main class="flex-1 min-h-0 px-8 pb-8">
        {% block content %}{% endblock %}
    </main>
</body>
</html>
