feat(ui): design system foundation — CSS tokens, base template

templates/base.html

@@ -4,18 +4,35 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}Feedmill Recounter{% endblock %}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    {% block head %}{% endblock %}
 </head>
 <body>
-    <header>
-        <h1>Feedmill Recounter</h1>
-        <nav>
-            <a href="/">Upload</a>
-            <a href="/jobs">Jobs</a>
-        </nav>
+    <a href="#main" class="skip-link">Skip to content</a>
+
+    <header class="site-header">
+        <div class="container">
+            <h1>Feedmill Recounter</h1>
+            <nav class="site-nav" aria-label="Main navigation">
+                <a href="/">Upload</a>
+                <a href="/jobs">Jobs</a>
+            </nav>
+        </div>
     </header>
-    <main>
-        {% block content %}{% endblock %}
+
+    <main id="main">
+        <div class="container">
+            {% block content %}{% endblock %}
+        </div>
     </main>
+
+    <footer class="site-footer">
+        <div class="container">
+            <p>Feedmill Recounter &mdash; Feedmill video analysis tool</p>
+        </div>
+    </footer>
 </body>
 </html>