{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}B42 India-Play it real{% endblock %}</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0056D2',
                        'brand-green': '#28A745',
                        'brand-purple': '#6F42C1',
                        'navy': '#0A1D3A',
                        'text-dark': '#333333',
                        'text-gray': '#3A3A3A',
                        'text-light': '#6C757D',
                    },
                    fontFamily: {
                        sans: ['Inter', 'ui-sans-serif', 'system-ui'],
                        poppins: ['Poppins', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- Google Fonts: Poppins & Inter -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
    
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

    <style>
        html {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body {
            font-family: 'Inter', sans-serif;
            color: var(--color-text-dark);
            line-height: 1.6;
            background-color: var(--color-gray-50);
        }
    </style>   
</head>

<body class="bg-gray-50">
    <!-- Header -->
    <header>
        {% include "includes/public_navbar.html" %}
    </header>

    <!-- Main Content -->
    <main class="">
        {% block content %}
        {% endblock %}
    </main>

    <!-- Footer -->
    <footer>
        {% include "includes/footer.html" %}
    </footer>

</body>
</html>