<!DOCTYPE html>
<html lang="{{ default_locale | default('en') }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ site.title }}</title>
    {% if theme.favicon %}
    <link rel="icon" href="{{ theme.favicon }}">
    {% endif %}
    <link rel="stylesheet" href="css/fonts.css">
    <style>
        :root {
            --td-color-primary: {{ theme.colors.primary | default('#C81F2D') }};
            --td-color-accent: {{ theme.colors.accent | default('#D4A03A') }};
            --td-color-bg: {{ theme.colors.bg | default('#F4F1EA') }};
            --td-color-text: {{ theme.colors.text | default('#111827') }};
            --td-color-text-secondary: {{ theme.colors.text_secondary | default('#6B6F5A') }};
            --td-color-surface: {{ theme.colors.surface | default('#FFFFFF') }};
            --td-color-border: {{ theme.colors.border | default('#DDD8CE') }};
            --td-radius: {{ theme.border_radius | default('28px') }};
            --td-font-family: {{ theme.font_family | default("'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif") }};
            --td-font-headings: {{ theme.font_family_headings | default("'Sora', 'Inter', sans-serif") }};
            --td-term-color: {{ theme.term_color or theme.colors.accent_muted | default('#A01924') }};
            --td-term-weight: {{ theme.term_weight | default('600') }};
        }
        * { box-sizing: border-box; }
        body {
            font-family: var(--td-font-family);
            line-height: 1.6;
            max-width: 600px;
            margin: 0 auto;
            padding: 4rem 1.5rem;
            background: var(--td-color-bg);
            color: var(--td-color-text);
            text-align: center;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        h1 {
            color: var(--td-color-primary);
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
            font-family: var(--td-font-headings);
            letter-spacing: -0.02em;
        }
        .subtitle {
            color: var(--td-color-text-secondary);
            font-size: 1.2rem;
            margin-bottom: 2.5rem;
        }
        .logo {
            width: 88px;
            height: 88px;
            margin: 0 auto 1.5rem auto;
            display: block;
            object-fit: contain;
        }
        .logo-mark {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
        }
        .logo-mark .ring-outer {
            width: 72px;
            height: 72px;
            border: 3px solid var(--td-color-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .logo-mark .ring-inner {
            width: 44px;
            height: 44px;
            border: 2px solid var(--td-color-text-secondary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .logo-mark .ring-dot {
            width: 16px;
            height: 16px;
            background: var(--td-color-primary);
            border-radius: 50%;
        }
        .languages {
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        .lang-card {
            display: block;
            background: var(--td-color-surface);
            border: 1px solid var(--td-color-border);
            border-radius: var(--td-radius);
            padding: 2rem 3rem;
            text-decoration: none;
            color: inherit;
            transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
            min-width: 200px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        .lang-card:hover {
            border-color: var(--td-color-primary);
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
            transform: translateY(-2px);
        }
        .lang-card h2 {
            margin: 0 0 0.25rem 0;
            color: var(--td-color-primary);
            font-family: var(--td-font-headings);
        }
    </style>
</head>
<body class="td-style-{{ theme.style | default('terra') }}">
    {% if theme.logo %}
    <img src="{{ theme.logo }}" alt="" class="logo">
    {% else %}
    <div class="logo-mark" aria-hidden="true">
        <span class="ring-outer"><span class="ring-inner"><span class="ring-dot"></span></span></span>
    </div>
    {% endif %}
    <h1>{{ site.title }}</h1>
    <p class="subtitle">{{ site.tagline }}</p>
    <div class="languages">
        {% for loc in locales %}
        <a href="{{ loc.code }}/index.html" class="lang-card">
            <h2>{{ loc.label }}</h2>
        </a>
        {% endfor %}
    </div>
</body>
</html>
