{{define "head-fouc-prevention"}}
    <!-- FOUC Prevention: Inline critical CSS + Apply color theme before page render -->
    <!-- Critical theme variables inlined to prevent flash of unstyled content -->
    <style>
      /* Light theme (default) - critical variables only */
      :root {
        --page-bg: #d6d6d6;
        --paper-bg: #ffffff;
        --text-primary: #1a1a1a;
        --sidebar-bg: #d1d4d2;
      }
      /* Dark theme - critical variables only */
      [data-color-theme="dark"] {
        --page-bg: #3a3a3a;
        --paper-bg: #1a1a1a;
        --text-primary: #e0e0e0;
        --sidebar-bg: #3a3d3e;
      }
      /* Auto theme follows system preference */
      @media (prefers-color-scheme: dark) {
        [data-color-theme="auto"] {
          --page-bg: #3a3a3a;
          --paper-bg: #1a1a1a;
          --text-primary: #e0e0e0;
          --sidebar-bg: #3a3d3e;
        }
      }
      /* Apply critical styles immediately */
      html { background-color: var(--page-bg); }
      body { color: var(--text-primary); }
    </style>
    <script>
    (function() {
      // First-time visitors ALWAYS get light theme (paper aesthetic)
      // Users can switch to dark/auto and their preference is saved
      let theme = localStorage.getItem('color-theme-mode') || 'light';
      document.documentElement.setAttribute('data-color-theme', theme);
    })();
    </script>
{{end}}