<head>
  <%- partial('_partial/meta') %>
  
  <!-- Fonts -->
  <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=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap" rel="stylesheet">
  
  <!-- Tailwind CSS -->
  <% if (process.env.NODE_ENV !== 'production') { %>
  <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
  <script>
    // Suppress Tailwind CDN production warning in development
    if (typeof tailwind !== 'undefined') {
      tailwind.config = {
        corePlugins: {
          preflight: false,
        }
      }
    }
  </script>
  <% } else { %>
  <!-- Production: Using CDN for demo purposes -->
  <!-- For better performance, install Tailwind CSS as PostCSS plugin -->
  <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
  <script>
    // Suppress production warning
    const originalWarn = console.warn;
    console.warn = function(message) {
      if (message && message.includes && message.includes('cdn.tailwindcss.com should not be used in production')) {
        return;
      }
      originalWarn.apply(console, arguments);
    };
    
    // Handle AudioContext warnings
    const originalError = console.error;
    console.error = function(message) {
      if (message && message.includes && message.includes('AudioContext was not allowed to start')) {
        return;
      }
      originalError.apply(console, arguments);
    };
  </script>
  <% } %>
  
  <!-- Theme CSS -->
  <%- css('css/style') %>
  <%- css('css/code-blocks') %>
  <%- css('css/cover-images') %>
  <%- css('css/chinese-text-fix') %>
  
  <!-- Theme Colors -->
  <style type="text/tailwindcss">
    :root {
      <% 
      const scheme = theme.color_schemes[page.layout] || theme.color_schemes.home;
      for (const [key, value] of Object.entries(scheme)) { 
      %>
      --<%= key.replace('_', '-') %>-color: <%= value %>;
      <% } %>
    }
    body {
      font-family: 'Newsreader', serif;
      background-color: var(--background-color);
      color: var(--text-primary-color);
    }
  </style>
  
  <!-- Mobile Menu Script -->
  <script src="<%- url_for('js/mobile-menu.js') %>" defer></script>
  
  <!-- Code Copy Script -->
  <script src="<%- url_for('js/code-copy.js') %>" defer></script>
  
  <!-- Reading Progress Script -->
  <script src="<%- url_for('js/reading-progress.js') %>" defer></script>
</head>