<!DOCTYPE html>
<html data-theme="light">
  <head>
    <title><%= content_for(:title) || "Error - Hack Club Auth" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <script>
      (function() {
        try {
          const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
          const defaultTheme = systemPrefersDark ? "dark" : "light";
          const savedTheme = localStorage.getItem("theme") || defaultTheme;
          document.documentElement.dataset.theme = savedTheme;
        } catch(e) {
          // Silently fail if localStorage is unavailable
          document.documentElement.dataset.theme = "light";
        }
      })();
    </script>
    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">
    <%= vite_client_tag %>
    <%= vite_stylesheet_tag "application.css" %>
    <%= vite_javascript_tag 'application' %>
  </head>
  <body>
    <%= yield %>
    <% unless Rails.env.production? %>
      <div class="environment <%= Rails.env %>" />
    <% end %>
  </body>
</html>
