Auto‑merge remote changes, keep our new globals.css

globals.css

@@ -0,0 +1,66 @@
+/* 1. Add spacing vars
+   Added for consistent responsive spacing
+*/
+:root {
+  --sp-base: 0.5rem;
+  --sp-sm: 1rem;
+  --sp-md: 1.5rem;
+  --sp-lg: 3rem;
+}
+
+/* Existing color vars remain */
+:root {
+  --gold: #E8A849;
+  --cream: #f5f0e8;
+  --navy: #001321;
+  --ink: #1a1a1a;
+  --warm: #a6683c;
+  --bg: #FAF7F0;
+  --surface: #e8eff3;
+}
+
+/* 2. Responsive adjustments */
+@media (min-width: 640px) {
+  .navbar {
+    padding: var(--sp-sm) var(--sp-lg);
+  }
+}
+
+/* 3. Dark mode */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #111;
+    --ink: #faf7f0;
+  }
+}
+
+/* 4. Focus visible */
+button:focus-visible,
+a:focus-visible {
+  outline: 2px solid var(--gold);
+  outline-offset: 2px;
+}
+
+/* 5. Navbar link reuse */
+.navbar-link {
+  display: inline-block;
+  color: rgba(245, 240, 232, 0.85);
+  text-decoration: none;
+  font-size: 14px;
+  padding: 6px 0;
+  border-bottom: 1.5px solid transparent;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.navbar-link.active {
+  color: var(--gold);
+  border-color: var(--gold);
+}
+
+.navbar-link:hover {
+  color: var(--cream);
+}
+
+/* 6. Typography helpers */
+h1 { font-size: 2.5rem; font-weight: 700; }
+h2 { font-size: 2rem; font-weight: 600; }

src/components/LanguageSwitcher.tsx

@@ -5,7 +5,7 @@ import { Language, setLanguage, useLanguage } from '@/lib/i18n';
 function Flag({ language }: { language: Language }) {
   if (language === 'en') {
     return (
-      <svg width="24" height="16" viewBox="0 0 24 16" fill="none">
+      <svg width="24" height="16" viewBox="0 0 24 16" fill="none" aria-hidden="true">
         <rect width="24" height="16" fill="white" />
         <rect x="0" y="6" width="24" height="4" fill="#CE1124" />
         <rect x="10" y="0" width="4" height="16" fill="#CE1124" />
@@ -14,12 +14,12 @@ function Flag({ language }: { language: Language }) {
   }
 
   return (
-    <svg width="24" height="16" viewBox="0 0 24 16" fill="none">
+    <svg width="24" height="16" viewBox="0 0 24 16" fill="none" aria-hidden="true">
-      <rect width="24" height="16" fill="white" />
+      <rect width="24" height="8" fill="#FFD100" />
-      <rect y="0" width="24" height="5.33" fill="#EF3340" />
+      <rect y="8" width="24" height="4" fill="#073685" />
-      <rect y="10.67" width="24" height="5.33" fill="#EF3340" />
+      <rect y="12" width="24" height="4" fill="#EF3340" />
-      <rect y="5.33" width="24" height="5.33" fill="#073685" />
+      <circle cx="12" cy="8.2" r="2.2" fill="#FFFFFF" opacity="0.95" />
-      <path d="M12 8L10.39 9.18L11.02 7.24L9.39 6.82L11.2 6.82L12 5L12.81 6.82L14.62 6.82L12.98 7.24L13.61 9.18L12 8Z" fill="#FFD100" />
+      <circle cx="12" cy="8.2" r="1.1" fill="#EF3340" opacity="0.8" />
     </svg>
   );
 }
@@ -38,7 +38,7 @@ export default function LanguageSwitcher() {
       style={{
         position: 'fixed',
         top: '1rem',
-        left: '1rem',
+        right: '1rem',
         zIndex: 1000,
         background: 'rgba(255, 255, 255, 0.9)',
         border: '1px solid #ddd',